在web裡顯示各種菜單

web上用javascript實現的各種菜單

在web上出現的菜單，常見的的無非兩種，一則，如win菜單，滑鼠移動上去或者單擊時候彈出， 二則。如資源管理員中的樹目錄結構 ，具體效果如下顯示：

win式菜單

菜單1	菜單2	菜單2
項1 項2 項3	項1 項2 項3	項1 項2 項3

樹結構菜單

菜單1 |-項1 |-項2 |-項3

菜單2 |-項1 |-項2 |-項3

菜單3 |-項1 |-項2 |-項3

其主要源碼如下：

<!--StartFragment--><table width="100%">
    <caption>win式菜單</caption>
    <tr>
        <th id="Th1" onmouseover="javascript:mouse_over('item1')">
         菜單1
         </th>
         <th id="Th2"onmouseover="javascript:mouse_over('item2')">
         菜單2
         </th>
         <th id="Th3" onmouseover="javascript:mouse_over('item3')">
         菜單2
         </th>
      </tr>
      <tr>
        <td align="center" onmouseout="javascript:mouse_out('item1')">       
             <div id="Div1" style="display:none">
             <table>
                <tr><th>項1</th></tr>
                <tr><th>項2</th></tr>
                <tr><th>項3</th></tr>
             </table>
             </div>
         </td>         
         <td align="center" onmouseout="javascript:mouse_out('item2')">
              <div id="Div2" style="display:none">
              <table>
                <tr><th>項1</th></tr>
                <tr><th>項2</th></tr>
                <tr><th>項3</th></tr>
             </table>
             </div>  
        </td>
         <td align="center" onmouseout="javascript:mouse_out('item3')">
             <div id="Div3" style="display:none">
             <table>
                <tr><th>項1</th></tr>
                <tr><th>項2</th></tr>
                <tr><th>項3</th></tr>
             </table>
             </div>  
        </td>               
    </tr>
</table>
<hr />
<table width="100%">
    <caption>樹結構菜單</caption>
    <tr>
        <td>
            <a href="javascript:open('item4')">菜單1</a>
            <div id="Div4" style="display:none">
                <table>
                    <tr><td>|-項1</td></tr>
                    <tr><td>|-項2</td></tr>
                    <tr><td>|-項3</td></tr>
                </table>
            </div>
        </td>       
    </tr>
    <tr>
        <td>
            <a href="javascript:open('item5')">菜單2</a>
            <div id="Div5" style="display:none">
                <table>
                    <tr><td>|-項1</td></tr>
                    <tr><td>|-項2</td></tr>
                    <tr><td>|-項3</td></tr>
                </table>
            </div>
        </td>       
    </tr>
    <tr>
        <td>
            <a href="javascript:open('item6')">菜單3</a>
            <div id="Div6" style="display:none">
                <table>
                    <tr><td>|-項1</td></tr>
                    <tr><td>|-項2</td></tr>
                    <tr><td>|-項3</td></tr>
                </table>
            </div>
        </td>       
    </tr>
</table>
<hr />
<script language="javascript" type="text/javascript">
<!--
    //初始化層管理器
    var layouts = new Array();
    layouts.push("item1");
    layouts.push("item2");
    layouts.push("item3");
    layouts.push("item4");
    layouts.push("item5");
    layouts.push("item6");

    //層處理函數
    function out_layout(divname)
    {
        for(var i = 0; i < layouts.length; ++i)
             if(document.getElementById(layouts[i]))
             document.getElementById(layouts[i]).style.display='none';
        document.getElementById(divname).style.display = "block";               
    }
    //事件處理函數
    function mouse_over(divname)
    {
       //document.getElementById(meum).style.backgroud-color = BLUE;
       if(document.getElementById(divname).style.display == "none")
           out_layout(divname);   
    }
    function mouse_out(divname)
    {
       document.getElementById(divname).style.display = "none";
    }
    function open(divname)
    {
       if(document.getElementById(divname).style.display != "none")
            document.getElementById(divname).style.display = "none";
        else
            out_layout(divname);
    }
-->
</script>