javascriptで伸縮するメニューができる

auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。

<script type="text/javascript"  xsrc="imagemenu.js" mce_src="imagemenu.js"  ></script>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" xhref="" mce_href=""  ><span>TOP</span></a></li>
<li><a class="kwick opt2" xhref="" mce_href=""  ><span>CSS</span></a></li>
<li><a class="kwick opt3" xhref="" mce_href=""  ><span>HTML</span></a></li>
<li><a class="kwick opt4" xhref="" mce_href=""  ><span>ABOUT</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:185});
</script>

phatfusionの元のsampleはそれぞれ違う画像を動かしてますが、まあこの方がメニューっぽいかなと。クリックするとその部分の幅が固定されるようですが、リンクをつける場合はあまり必要がない機能のような気もします。

また、Image Menuは動作中に右端がぶるぶる震えてしまうので、<ul class=”kwicks”>の幅を固定して、背景に同じパターンの画像を配置するときれいに見えます。自分のsampleでは端を角丸にしたかったので、角丸の画像を１枚作って、左と右に表示してます。

←角丸
←各背景

#kwick {
position:relative;
width:515px;
background:url(menu_bg_gra_lr.gif) no-repeat top left;
}
#kwick ul.kwicks {
display:block;
margin:0 0 0 5px;
height:50px;
background:url(menu_bg_gra_lr.gif) no-repeat top right;
list-style:none;
}

あとこれをちょっと応用して縦に伸縮するメニューを作ってみました。

縦バージョンはimagemenu.jsのソースを「width,Width」→「height,Height」に変換しただけのものを使ってます。しかしこんなことまでできるとは…。

（追記：2007/03/28）
Operaで縦バージョンがおかしい件ですが、CSSの読み込みでエラーが出ていた模様です。
その箇所を直したらOpera9.10では動作するようになりました。ご指摘ありがとうございます。