完成的一次作业
效果图
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;
}
}