JS事件笔记：二级导航

完成的一次作业
效果图
在这里插入图片描述

JavaScript写二级导航
在JavaScript文件中对相应标签添加鼠标事件：鼠标进入和鼠标离开（mouseenter, mouseleave）

{
    let nav = document.getElementById("nav");  //读取页面id为nav的标签
    let navLi= nav.children;   //读取nav的所有子标签  navLi为数组
    for (let i = 0; i <= navLi.length-1; i++){   //对那navLi进行遍历
        navLi[i].addEventListener("mouseenter",function( event ){  //添加鼠标进入事件
            // console.log(i);     //打印navLi的索引
            let nowTar = event.currentTarget;   //读取鼠标进入的当前标签
            let tar = nowTar.children[1];       //读取nowTar的索引为1 的子标签
            if( !tar ){      //对tar进行判断，不存在
                return false;    //终止函数运行
            }
            tar.classList.add("nav_block");   //对tar相对应的标签添加一个类：nav_block
        });

        navLi[i].addEventListener("mouseleave",function( event ){  //添加鼠标离开事件
            // console.log(i);
            let nowTar = event.currentTarget;
            let tar = nowTar.children[1];
            if( !tar ){
                return false;
            }
            //将类nav_block 移除tar相对应得标签
            tar.classList.remove("nav_block");  
        });

    }
}

html文件中，通过对一级导航得ul设置id来读取它得子标签li 和二级导航的标签

<body>
<div class="subNav-w subNav-h">
    <div class="nav_bg subNav-h">
        <div class="logo">
            <img src="images/pho.jpg" height="92" width="91"/>
            <div class="span">ResidualBridge</div>
        </div>
        <div class="first">
            <ul class="navUl" id="nav">   <!-- 一级导航 -->
                <li>
                    <a href="#">公司介绍</a>
                    <ul class="menu menu-h">    <!-- 二级导航 -->
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">岗位分布</a></li>
                        <li><a href="#">人员介绍</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                    <ul id="submenu" class="menu menu-h">
                        <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>
                    <ul class="menu menu-h">
                        <li><a href="#">客服电话</a></li>
                        <li><a href="#">微信公众号</a></li>
                        <li><a href="#">微博</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">产品查询</a>
                    <ul class="menu menu-h">
                        <li><a href="#">产品编号</a></li>
                        <li><a href="#">产品类型</a></li>
                        <li><a href="#">生产时间</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS样式对整个页面进行排版布局

.subNav-w{
    width: 800px;
    background-color: #eeeeee;
}
.subNav-h{
    height: 802px;
}
.nav_bg{
    width: 280px;
    background-color: #5f0f85;
    margin-left: 0;
    border-right:7px solid #c08cd9 ;
}

.logo{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 66px 0 0 0;
}
.logo>img{
    border-radius: 50%;
}
.span{
    color: #f49c00;
    font-size: 16px;
    text-align: center;
}
.first{
    width: 229px;
    margin-top: 50px;
    text-align: center;
}
.navUl>li{
    border-bottom: 1px solid #943dbe;
    position: relative;
}
.navUl>li>a{
    color: #ffffff;
    font-size: 18px;
    display: block;
    padding: 20px 36px 20px 36px;
}
.navUl>li>a:hover,
.navUl>li:hover>a{     /* 当鼠标移上二级导航时，相应的一级导航的hover保持不变 */
    background-color: #3b0a52;
    color: #f19100;
}
.menu{
    width: 100%;
    position: absolute;   /* 相对定位  二级导航出现的位置 */
    top: 0;
    left: 229px;
    display: none;
}
.menu-h{
    height: 100%;
}
.menu>li{
    height: 55px;
    line-height: 55px;
    background-color: #3b0a52;
    font-size: 18px;
}
.menu>li>a{
    color: #f19100;
    display: block;
}
.menu>li:hover>a,
.menu>li>a:hover{
    background-color: #7e22ff;
    color: #ffffff;
}
.nav_block{
    display: block;
    animation: subNav 0.5s;   /* 设置帧动画的时间 */  
}
@keyframes subNav {   /* 添加帧动画 */
    0%{
        width: 0;
        opacity: 0;
    }
    100%{
        width: 100%;
        opacity: 1;
    }
}

ResidualBridge

发布了13 篇原创文章 · 获赞 2 · 访问量 320

私信关注

JS事件笔记：二级导航

猜你喜欢