HTML导航菜单与JS实现-优快云博客

本文链接：https://blog.youkuaiyun.com/Wangdanting123/article/details/51348338

HTML代码：

<body>
<div class="navMenu">
    <ul>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">语文</a>
                    <ul>
                        <li><a href="#">唐诗</a></li>
                        <li><a href="#">宋词</a></li>
                    </ul>
                </li>
                <li><a href="#">英语</a></li>
            </ul>
        </li>
        <li><a href="#">课程大厅</a></li>
        <li><a href="#">学习中心+</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">语文</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">英语</a></li>
            </ul>
        </li>
        <li><a href="#">帮助</a></li>
    </ul>
</div>
</body>

css代码：

 *{
            padding:0;
            margin:0;
        }
        /*一级菜单*/
        .navMenu {
            width:570px;
            margin:0 auto;
        }
        .navMenu ul li{
            float: left;
            position: relative;
        }
        li{
            list-style: none;
            background-color: #eee;
            width: 140px;
            height: 40px;
            text-align: center;
            margin-right: 2px;
            margin-bottom: 2px;
        }
        ul li a{
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #000;
            text-decoration: none;
            display: block;
            padding:0 10px;
        }
        /*二级菜单*/
        .navMenu ul li ul {
            display: none;
            position:absolute;
            left: 0;
            top:0;
            margin-top:42px;
        }
        .navMenu ul li ul li{
            float:none;
        }
        /*三级菜单*/
        .navMenu ul li ul li ul{
            display: none;
            left:140px;
            top:-42px;
        }

js代码：

<script type="text/javascript">
    function addLoadEvent(func){          //func为将要绑定到window.onload上的函数；
        var oldοnlοad=window.onload;    //可能已经绑定了一些函数
        if(typeof window.onload!='function'){  //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
            window.οnlοad=func();
        }
        else{                                   //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现在指令的末尾
            window.οnlοad=function(){
                oldonload();
                func();
            }
        }
    }
    function Hover(){
            var Lis=document.getElementsByTagName("li");
            for(var i= 0,len=Lis.length; i<len; i++){
                Lis[i].οnmοuseοver=function(){
                    var secondUl=this.getElementsByTagName("ul")[0];
                    if(secondUl!=undefined){
                        secondUl.style.display="block";
                    }
                    this.style.backgroundColor="#0066FF";
                }
                Lis[i].οnmοuseοut=function(){
                    var secondUl=this.getElementsByTagName("ul")[0];
                    if(secondUl!=undefined){
                        secondUl.style.display="none";
                    }
                    this.style.backgroundColor="#eee";
                }
            }
    }
    addLoadEvent(Hover);
</script>

js实现三级菜单的制作