在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>