一个常用的javaScript菜单效果

最新推荐文章于 2022-11-19 08:09:15 发布

shahalashamo

最新推荐文章于 2022-11-19 08:09:15 发布

阅读量996

点赞数

分类专栏： JavaScript客户端编程文章标签： javascript class menu function div server

本文链接：https://blog.csdn.net/shahalashamo/article/details/3720797

版权

JavaScript客户端编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近发现学习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" οnmοusemοve="show('submenu1')" οnmοuseοut="hide('submenu1')" id="menu1">
    <a href="#" οnclick="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" οnmοusemοve="show('submenu2')" οnmοuseοut="hide('submenu2')">
    <a href="#">菜单二</a>
    <div id="submenu2" class="submenu" οnmοusemοve="show('submenu1')" οnmοuseοut="hide('submenu1')"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
    </li>
        <li class="menu" οnmοusemοve="show('submenu3')" οnmοuseοut="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" οnmοusemοve="show('submenu4')" οnmοuseοut="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>

shahalashamo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个常用的javaScript菜单效果

最近发现学习javaScript有所突破，所有试着做了几个例子，这个就是其中的一个，什么也不用说了，都在代码里。http://www.w3.org/1999/xhtml"> 无标题页 ul { list-style-type:none; margin-left:0px; } .menu
复制链接

扫一扫