ゆっくりとフォーカスするエフェクトJavaScript （Fancy Menu）

CSSで作成したメニューなどでもマウスフォーカスなどを視覚的に変更する事は簡単にできるが、JavaScriptを利用してさらに楽しいエフェクト効果を出すのが、Fancy Menu。横に配置したメニューの背景イメージがエフェクト効果を得る。

エフェクト効果を出す部分はすべて画像イメージのパーツを利用する。サンプルではテキスト部分もイメージとして用意してある。イメージの指定はCSSで行うことが出来るので、JavaScriptを修正する必要はない。JavaScriptライブラリとして利用できるが、動作には mootools.js も必要になる。

マウス操作でフォーカスが移動

（Fancy Menu動作サンプル）

mootools必要なコンポーネント

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

サンプルで用意されているテキストは画像が利用されているが、テキストを利用しても問題なく利用できる。その場合、不要なCSS記述は削除してあげればよい。動作サンプルとして利用した物をダウンロード形式にしたので、作成する際に参考にしていただきたい。

Fancy Menu：ダウンロード