JS wrote the original ecological background of the navigation slider

Look at the results:

Mouse slides to the navigation item, a color slide back to the corresponding navigation key.

When the mouse left, slide it back to the current navigation items.

Binding of the transition do CSS3 sliding effect.

First, analysis

1. navigation at the top, indicating that there are hierarchical navigation, and high. So either relative positioning navigation, or is absolute positioning. Only the positioning of the label, the hierarchy z-index will be effective. Here, we choose the relative positioning .

Slide to slide, that it must be absolute positioning , and the lower level, behind the navigation. And, by the left attribute pattern, the change in position of the control slide.

2. The width of the slider li keep consistent, to obtain a width li may be utilized  offsetWidth properties.

3. li slider to move to the location to go.

    Can get li.getBoundingClientRect () left -. Ul.getBoundingClientRect (    ) left. Get the relative position in the ul li inside.

     Then control slider style left can change the position of the slider.

Second, the 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 );  //  初始化滑块的位置