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="mainNav">
    <div class="section navSec">
        <ul class="navUl" id="navUL">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">欢迎进入</a>
                <ul class="navULM">
                    <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>
                <ul class="navULM">
                    <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>
</nav>
<!--主体内容-->
<div class="section bodySec">
    主体内容
</div>


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


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

公共样式：


*{
    margin: 0;
    padding: 0;
}
ul,li，ol{
    list-style: none;//清除页面中的点
}
a{
    text-decoration: none;//去掉超链接的下划线
}
img{
    border: none;//去掉图片的边框
}
.clears{
    //清除浮动
    clear: both;
    height: 0;
    line-height: 0;
    font-size:0;
    overflow:hidden;
}
button{
    //变为手势
    cursor: pointer;
}
body{
    font-family: Arial, Verdana, "Microsoft Yahei", "Pingfang SC", "Simsn","pingfan SC","Simsn";
    font-size:14px;
}

代码样式：

.mainNav{
    background: #7e22ff;
    height: 50px;
}
.section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.navSec{
    height: 50px;
    background: #7e22ff;
}
/*一级导航相对定位，二级导航绝对定位*/
.navUl>li{
    float:left;
    line-height: 50px;/*文字上下居中*/
    position: relative;/*相对定位*/
    perspective: 500px;/*透视，加载容器上面，把内部变成透视空间*/
    transform-style: preserve-3d;/*伪3D，把内部变成3D空间*/
}
.navUl>li>a{
    color: #fff;
    display: block;/*块元素*/
    padding-left: 50px;
    padding-right: 50px;
    transition:all 0.5s;/*过度动画*/
}
.navUl>li>a:hover,
.navUl>li:hover>a{/*在二级导航上面是，一级导航上面也有背景*/
    background:#520c64 ;
}
.navULM{
    position: absolute;/*绝对定位*/
    top:50px;
    left: 50%;/*导航线的正中间*/
    margin-left: -60px;
    width: 120px;
    text-align: center;
    display: none;/*隐藏二级菜单，页面不会渲染*/
}
.navULM a{
    background: #7e22ff;
    color: white;
    display: block;
    transition:all 0.5s;/*过度动画*/
}
.navULM a:hover{
    background: #520c64;
}
.navULM li{
    background: #7e22ff;
}
.navULM.on{
    display: block;

}
.navULM.on li:nth-child(1){    /*nth-child第n个子标签  第一个字标签（第一个li）*/
    animation: subAni 0.5s both;
}
.navULM.on li:nth-child(2){    /*nth-child第n个子标签*/
    animation: subAni 0.5s 0.1s both;
}
.navULM.on li:nth-child(3){    /*nth-child第n个子标签*/
    animation: subAni 0.5s 0.2s both;
}
.navULM.on li:nth-child(4){    /*nth-child第n个子标签   第四个子标签*/
    animation: subAni 0.5s 0.3s both;
}
.navULM.on li:nth-child(5){    /*nth-child第n个子标签    第五个子标签*/
    animation: subAni 0.3s 0.4s both;
}
@keyframes subAni {
    0%{
        transform: rotateY(180deg);
        top:90px;
        opacity: 0;//透明度，看不见
    }
    /*
    0%{
        transform: scale(0.5,0.5);
        top:90px;
        opacity: 0;//透明度，看不见
    }
    90%{
        transform:scale(1.1,1.1);
        top:90px;
        opacity: 0;//透明度，看不见
    }
    100%{
        transform:  scale(1,1);
        top:50px;
        opacity: 1;//看不见
    }*/
    100%{
        transform:  rotateY(0deg);
        top:50px;
        opacity: 1;//看不见
    }

}



.bodySec{
    height: 200px;
    background: #B292FF;
}

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.classList.add("on");

        });
        li[i].addEventListener("mouseleave",function (event) {
            let nowLi=event.currentTarget;
            let ul=nowLi.children[1];
            if(!ul){//判断标签是否存在
                return false;//若不存在在，终止函数
            }
            //去掉类
            ul.classList.remove("on")
        });
    }
}

坚持坚持-未来可期$$

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

私信关注

JavaScript写横向二级导航

猜你喜欢