先看效果:
鼠标滑动到导航项上,后面一个色块滑动到对应的导航项上。
鼠标离开的时候,滑块就退回到当前导航项上。
结合了 CSS3 的 transition 来做滑动效果。
一、分析
1. 导航在上方,说明导航有层级,且较高。那么导航要么是相对定位,要么就是绝对定位。只有定位的标签,层级 z-index 才有效果。这里,我们选择相对定位。
滑块 能滑动,说明它肯定是绝对定位的,并且层级较低,在导航的后面。并且,可以通过样式的 left 属性,控制滑块的位置变化。
2. 滑块的宽度要跟 li 的宽度保持一致,要获取 li 的宽度,可以利用 offsetWidth 属性。
3. 滑块要移动到 li 的位置去。
可以获取 li.getBoundingClientRect().left - ul.getBoundingClientRect().left 得到 li 在 ul 里的相对位置。
再控制滑块的样式 left 就可以改变滑块的位置了。
二、代码
<nav class="daohang">
<div class="section">
<ul id="ul">
<li class="current"><a href="#">公司</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">责任</a></li>
<li><a href="#">2020我们在一起</a></li>
</ul>
<div id="box" class="box"></div>
</div>
</nav>
/* 公用样式 */
*{
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
a{
text-decoration: none;
}
body{
font-family: Arial,Verdana,"Microsoft Yahei",".PingFang SC","Simsun";
font-size: 14px;
}
/* 导航 主体*/
.daohang{
height: 50px;
line-height: 50px;
background: #29387e;
}
.section{
width: 1200px;
height: 50px;
margin-left: auto;
margin-right: auto;
color: #fff;
position: relative;
}
.daohang li{
float: left;
}
.daohang ul{
position: relative;
z-index: 1;
height: 50px;
}
.daohang ul a{
display: block;
height: 50px;
padding-left: 20px;
padding-right: 20px;
color: #fff;
text-align: center;
}
.daohang li.current a{
background: #f30;
}
.box{
height: 50px;
background: #f30;
position: absolute;
left: 0;
top: 0;
transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1.05); /* 滑块的滑动 就靠它了 */
}
let box = document.getElementById("box");
let ul = document.getElementById("ul");
let li = ul.children;
let cur = ul.querySelector(".current");
/*
* 设置 box 的位置函数
* */
let setBoxPosition = function(tag){
let ulX = ul.getBoundingClientRect().left;
let liX =tag.getBoundingClientRect().left;
box.style.left =(liX- ulX ) + "px"; // 滑块位置更改
box.style.width =tag.offsetWidth + "px"; // 滑块宽度更改
};
// 给 li 添加事件
for( let i = 0 ; i <= li.length-1 ; i++ ){
li[i].addEventListener("mouseenter",function(event){
setBoxPosition( event.currentTarget );
});
li[i].addEventListener("mouseleave",function(event){
setBoxPosition( cur );
});
}
setBoxPosition( cur ); // 初始化滑块的位置