MooToolsのFancy menu

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

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

サンプルはこちら

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

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

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