Regardez les résultats:
glisse la souris sur l'élément de navigation, un dos de diapositives couleur à la touche de navigation correspondante.
Lorsque la souris à gauche, faites-le glisser vers les articles en cours de navigation.
La liaison de la transition ne CSS3 effet de glissement.
Tout d'abord, l'analyse
1. navigation en haut, ce qui indique qu'il y a navigation hiérarchique, et élevé. Donc , soit la navigation de positionnement relatif, ou est le positionnement absolu. Seul le positionnement de l'étiquette, le z-index de la hiérarchie sera efficace. Ici, nous choisissons le positionnement relatif .
Pour faire coulisser, qu'il doit être le positionnement absolu , et le niveau inférieur, derrière la navigation. Et, par le motif d'attribut gauche, le changement de position de la coulisse de commande.
2. La largeur du curseur li garder cohérente, pour obtenir une li largeur peut être utilisée offsetWidth propriétés.
3. curseur li pour se déplacer à l'endroit où aller.
Peut obtenir li.getBoundingClientRect () à gauche -. Ul.getBoundingClientRect ( .) Gauche Obtenez la position relative à l'intérieur ul li.
Ensuite, le style de curseur de commande gauche peut changer la position du curseur.
En second lieu, le code
<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 ); // 初始化滑块的位置
