« 今更なんですがThickBox | トップページ | Ajaxで作る立体的回転式メニュー »

2007.11.19

MooToolsのFancy menu

項目の幅に合わせてサイズが可変するスライドバー

昨日に引き続き、Web creatorsの記事からMooToolsライブラリのFancy menuを紹介してみます。ちなみにWeb creators9月号に載っています。サンプルデータはdevthoughtというサイトでダウンロードできますので、試してみて下さい。
カーソルに合わせてFlashっぽい動きで背景がスライドしてくる動きが楽しいです。メニュー項目にさりげない演出を加えたい時はうってつけだと思います。
僕も今回、中部ジェイ・シィさんのサイトで使わせていただきました。メニュー項目をいくつかカテゴリー分けしたい場合、デザインだけでなく、演出面でも差別化できるので良いのではないでしょうか。

サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

また、今回のサンプルでは、メニュー部分を画像にしてあります。しかし、通常の画像では背景を透過できないのでスライダーが見えません。なので、メニュー画像は背景を透過できるPNGにしてあります。 しかし、ここで問題なのがIE6。PNG画像に対応していないので、to-Rさんのalphafilter.jsを使い、IE6でも透過できるようにします。

最後に忘れちゃいけないのが、昨日紹介したThickboxやLightBox、一昨日紹介したAjaxZip2などのJavaScriptとは相性が悪いようです。同一ページでご使用になる際はご注意を!

|

« 今更なんですがThickBox | トップページ | Ajaxで作る立体的回転式メニュー »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17124566

この記事へのトラックバック一覧です: MooToolsのFancy menu:

« 今更なんですがThickBox | トップページ | Ajaxで作る立体的回転式メニュー »