一个常用的javaScript菜单效果

来源：互联网发布：剑三当战毒萝捏脸数据编辑：程序博客网时间：2024/04/28 05:15

最近发现学习javaScript有所突破，所有试着做了几个例子，这个就是其中的一个，什么也不用说了，都在代码里。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        ul
        {
        list-style-type:none;
        margin-left:0px;
        }
        .menu
        {
        width:100px;
        float:left;
        background-image:url(../images/titlebg2.gif)
        }
        .submenu
        {
        background-color:#D4E4F6;
        line-height:25px;
        width:100%;
         display: none;
        }

    </style>
    <script type="text/javascript">
    function show(id)
    {
        document.getElementById(id).style.display="block";
    }
    function hide(id)
    {
        document.getElementById(id).style.display="none";
    }
    function clickEvent(o)
    {
       var object=document.getElementById(o);
       object.style.backgroundImage="url(../images/titlebg1.gif)";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul>
    <li class="menu" onmousemove="show('submenu1')" onmouseout="hide('submenu1')" id="menu1">
    <a href="#" onclick="clickEvent('menu1')">菜单一</a>
    <div id="submenu1" class="submenu" ><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
    </li>
        <li class="menu" onmousemove="show('submenu2')" onmouseout="hide('submenu2')">
    <a href="#">菜单二</a>
    <div id="submenu2" class="submenu" onmousemove="show('submenu1')" onmouseout="hide('submenu1')"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
    </li>
        <li class="menu" onmousemove="show('submenu3')" onmouseout="hide('submenu3')">
    <a href="#">菜单三</a>
    <div id="submenu3" class="submenu"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
    </li>
        <li class="menu" onmousemove="show('submenu4')" onmouseout="hide('submenu4')">
    <a href="#">菜单四</a>
    <div id="submenu4" class="submenu"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
    </li>
    </ul>
    </div>
    </form>
</body>
</html>