JavaScript纵向二级导航

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="public.css">
    <link rel="stylesheet" href="submenu.css">
</head>
<body>
<!--通用导航-->
<nav class="mainWidth mainHe">
    <div class="section navSec">
        <div class="logo"><img src="images/二级菜单范例_03.png" height="86" width="84"/>
            <p>CoolTeacher.com</p>
        </div>
        <div class="menu">
        <ul class="navUl" id="navUL">
            <li>
                <a href="#">公司介绍</a>
                <ul class="navMen">
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">部门介绍</a></li>
                    <li><a href="#">员工信息</a></li>
                </ul>
            </li>
            <li>
                <a href="#">产品介绍</a>
                <ul class="navMen navH">
                    <li><a href="#">公司历史</a></li>
                    <li><a href="#">发展荣誉</a></li>
                    <li><a href="#">社会责任</a></li>
                    <li><a href="#">领导简介</a></li>

                </ul>
            </li>
            <li>
                <a href="#">联系方式</a>
            </li>
            <li>
                <a href="#">产品查询</a>
            </li>
        </ul>
        </div>
    </div>
</nav>
<!--主体内容-->
<div class="section bodySec">
    主体内容
</div>


<!--主体内容  end-->


<!--通用导航  end-->
<script src="menu.js"></script>
</body>
</html>

CSS：

.mainWidth {
    background: #c8ffc2;
    width: 1200px;
}
.mainHe{
    background: #c8ffc2;
    height: 800px;
}
.section{
    background: #5f0f85;
    width: 290px;
    margin-right: auto;
}
.navSec{
    height: 800px;
}
.logo{
    margin-left: 95px;
    padding-top: 60px;
}
.logo>p{
    margin-left: -20px;
    padding-top: 10px;
    color: #f49c00;
    font-size: 16px;
}
.menu{
    padding-top: 93px;
}
.navUl>li{
    line-height: 60px;
    border-bottom: 1px solid #943dbe;
    position: relative;
}
.navUl>li>a{
     font-size: 18px;
    color: white;
    padding-left: 102px;
    padding-right: 40px;
    transition: all 0.4s;
    display: block;
 }
.navUl>li>a:hover{
    background-color: #3b0a52;
    color: #e88b06;
}
.navMen{
    width: 100%;
    position: absolute;
    top: 0;
    left: 290px;
    display: none;
    animation: subAni 0.4s both;
}
@keyframes subAni {
    0%{
        transform:scale(0.5,0.5) rotateX(180deg);
        opacity: 0;//透明度，看不见
    }
    100%{
        transform: scale(1,1) rotateX(0deg);
        opacity: 1;//看不见
    }
}
.navMen>li>a{
    font-size: 18px;
    color: white;
    text-align: center;
    display: block;
    background: #520c64;
    transition: all 0.4s;
}
.navMen>li>a:hover{
    background-color: #3b0a52;
    color:#e88b06;
}

JS：

{
    let navUL=document.getElementById("navUL");
    let li=navUL.children;//找到ul下面的字标签li，不包括二级li
    //不推荐：li=navUL.getElementsByTagName("li");会找到一级li、二级li
    //不推荐：li=navUL.querySelectorAll("li");会找到一级li、二级li
    for(let i=0;i<=li.length-1;i++){
        li[i].addEventListener("mouseenter",function (event) {
            let nowLi=event.currentTarget;
            let ul=nowLi.children[1];
            if(!ul){//判断标签是否存在
                return false;//若不存在在，终止函数
            }
            //显示标签
            ul.style.display="block";
        });
        li[i].addEventListener("mouseleave",function (event) {
            let nowLi=event.currentTarget;
            let ul=nowLi.children[1];
            if(!ul){//判断标签是否存在
                return false;//若不存在在，终止函数
            }
            //隐藏标签
            ul.style.display="none";
        });
    }
}

注：公共样式（public）参考JavaScript横向二级导航
可更改图片

坚持坚持-未来可期$$

发布了19 篇原创文章 · 获赞 33 · 访问量 330

私信关注

JavaScript纵向二级导航

猜你喜欢