たくさんのメニューを小さな場所へ収めるのにドロップダウンメニューはもってこいの方法で、
色々とスタイリッシュなライブラリーが出てますが、ドロップダウンするのが1箇所だけだったら自作でもいいんじゃないの?
ってことで簡単にmootoolsでのドロップダウンメニューの作り方を書いてみます。
まずXHTMLソースは次のように、ボタンになるリンクの下(兄弟)にulとかでリストメニューを作り
識別用のIDをボタンに、クラスを子メニューにつけておきます。
<ul id="navigation"> <li><a href="#" title="サンプル1">サンプル1</a></li> <li><a id="sampleMenu" href="#" title="サンプル2">サンプル2</a> <ul class="childMenu"> <li><a href="#" title="Menu1">Menu1</a></li> <li><a href="#" title="Menu2">Menu2</a></li> <li><a href="#" title="Menu3">Menu3</a></li> <li><a href="#" title="Menu4">Menu4</a></li> </ul> </li> <li><a href="#" title="サンプル3">サンプル3</a></li> </ul>
説明続く。(結構長いです)