2階層のグローバルメニュー

次のようなメインメニューとサブメニューの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;
}