JavaScriptエフェクトで画像スライド式メニューを実装 （ImageMenu）

画像を利用したメニューを作成するときに参考になるサンプルが、phatfusion.netで紹介されているImage Menu。トランプを指でなぞるようなアニメーションを実装することが出来る。また、クリックですると選択状態を維持し、再度クリックで解除まで行う。

使用する画像の幅はすべて、同じサイズにしておく必要がある。画像イメージはスタイルシート中で背景画像（background:url）として指定する。また、imageMenu.js 以外にもmootools.js が必要になる。

mootools必要なコンポーネント

• Core - すべて
• Native - すべて
• Addons - Common、Dom
• Effects - Fx.Base、Fx.CSS、Fx.Elements、Fx.Transitions

mootoolsのトップページでも同様のエフェクトでナビゲーションを実装している。同様のナビゲーションを実装する事が簡単に出来る。Image Menuを実装する上で必要なファイルと、サイト上で利用されているサンプルコードをダウンロードできるように用意しておいたので、興味のある方は参照していただきたい。

ダウンロード：ImageMenu.zip (287Kbyte)