次のようなメインメニューとサブメニューの2階層からなるナビゲーションを作成します。
サブメニューを表示するには、JavaScriptとスタイルシートを使用して行います。 JavaScriptのonmouseoverとonmouseoutイベントでサブメニューのdisplayプロパ ティを変更し表示を切り替えます。
スタイルシートは、タブナビゲーションと同様にli要素をfloat:leftすることでリスト 項目が横方向に展開されます。次にli要素とa要素でpaddingを調整しメニュー の区切り画像を背景に指定します。
サブメニューの位置は、position: absolute;を指定することで調整しています。
<div id="menu"> <ul> <li> <a href="#" onmouseover="show('smenu1'),hide('smenu2','smenu3','smenu4','smenu5');" onmouseout="hide('smenu1');">HTML & CSS</a> </li> <li> <a href="#" onmouseover="show('smenu2'),hide('smenu1','smenu3','smenu4','smenu5');" onmouseout="hide('smenu2');">PHP</a></li> <li> <a href="#" onmouseover="show('smenu3'),hide('smenu1','smenu2','smenu4','smenu5');" onmouseout="hide('smenu3');">Platfome</a></li> <li> <a href="#" onmouseover="hide('smenu1','smenu3','smenu4','smenu2','smenu5');">Conntact</a></li> </ul> </div> <div class="submenu"> <ul id="smenu1" onmouseover="show('smenu1'),hide('smenu2','smenu3','smenu4','smenu5');" onmouseout="hide('smenu1');"> <li><a href="#">HTML & CSS</a></li> <li><a href="#">CSS Tips</a></li> <li><a href="#">HTMLリファレンス</a></li> <li><a href="#">CSSリファレンス</a></li> <li><a href="#">XSLT</a></li> </ul> <ul id="smenu2" onmouseover="show('smenu2'),hide('smenu1','smenu3','smenu4','smenu5');" onmouseout="hide('smenu2');"> <li><a href="#">MySQL</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Pear</a></li> </ul> <ul id="smenu3" onmouseover="show('smenu3'),hide('smenu1','smenu2','smenu4','smenu5');" onmouseout="hide('smenu3');"> <li><a href="#">Linux</a></li> <li><a href="#">玄箱</a></li> <li><a href="#">Windowsp</a></li> </ul> </div>
function show(id) { if (document.getElementById) { document.getElementById(id).style.display="block"; } else if (document.all) { document.all[id].style.display="block"; } else if (document.layers) { document.layers[id].display="block"; } } function hide(id) { if (document.getElementById) { document.getElementById(id).style.display="none"; } else if (document.all) { document.all[id].style.display="none"; } else if (document.layers) { document.layers[id].display="none"; } }
#menu { width :70%; padding-bottom :25px; background-color :#c8dae1; } #menu ul{ margin : 0; width :100%; background-color :#a0b7c4; } #menu ul li { float:left; margin :0; padding:0 0 0 9px; } #menu a,#menu a:hover { display :block; padding-right :8px; border :0; background :url('img/sep.gif') right 5px no-repeat; } #smenu1 { position: absolute; display: none; margin :0; top :190px; left : 50px; } #smenu2 { position: absolute; display: none; margin :0; top :190px; left : 160px; } #smenu3 { position: absolute; display: none; margin :0; top :190px; left : 210px; } #smenu1 li,#smenu2 li,#smenu3 li { float:left; margin :0; padding:0 0 0 9px; } #smenu1 a,#smenu2 a,#smenu3 a { display :block; padding-right :8px; border :0; background :url('img/sep1.gif') right 5px no-repeat; }
Copyright 1997-2010 BBB All rights reserved.