JavaScriptでアコーディオンメニュー

画像を利用したスライドメニュー｜imageMenu.js

またまた１月号のWeb creatorsからの使えそうなテクニックを…。
前回はFlashでauのオフィシャルサイトのようなアコーディオンメニューを作ってみましたが、今回はJavaScriptを使って同じようなモノを作ってみます。
サンプルはPhatfusionというサイトで確認するコトができます。肝心のJavaScript、imageMenu.jsのダウンロードページはないので、ブラウザにソースを表示してコピー＆ペーストして下さい。
また、mootools.jsも必要なのでサイトからダウンロードします。その時、Core、Class、Class.Extras、Array、String、Function、Number、Element、Element.Event、Element.Filters、Element.Slectors、Fx.Base、Fx.Css、Fx.Elements、Fx.transitions<をチェックして下さい。

サンプルはこんな感じです。

↑このFlashデータはこちらからダウンロードできます。

ソースを見てもらえば分かると思いますが、下記のscriptを記述します。
<script type="text/javascript">
var myMenu = new ImageMenu($$('#imgMenu li'),{openWidth:240});
</script>
（※openWidth:240の数値は実際の画像に合わせて下さい）

また、CSSも調整が必要ですので、よく分からない方は本を購入した方がよろしいかと思います。