响应式手风琴效果导航

此处代码为了实现手风琴效果，效果实现为，鼠标移动每一个组件上，背景（并不是真的背景）也会移动到当前组件上，鼠标离开后，再回到起始位置点，若点击，停留在当前位置。此单航是响应式的，设置最小宽度为400px,可根据自己情况调节。效果图如下

html代码如下：关于布局，不多说。唯一注意点是span需要放在ul之前

<nav id="nav">
     <span class="active"></span>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Shop</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">comment</a></li>
     </ul>

 </nav>　

/*层级并不能解决背景遮住导航区域，因此将用定位，在布局中，span先定位在nav上，再将ul定位上去，因为span在ul之前，所以ul会覆盖在span上，如果布局中span放在ul后面，则会遮住ul*/ 

<style>    *{        margin: 0;        padding: 0;    }    #nav {        height:60px;        position: relative;        background: rgba(119, 131, 147, 0.24);        min-width: 400px;    }

#nav ul{        width: 100%;        position: absolute;        top: 0;        left: 0;    }    /*层级并不能解决背景遮住导航区域，因此将用定位解决。在布局中，span先定位在nav上，再将ul定位上去，因为span在ul之前，所以ul会覆盖在span上，如果布局中span放在ul后面，则会遮住ul    */    .active{        display:block;        height: 60px;        width:14%;        background: #287cb3;        position: absolute;        top: 0;        left: 0;    }

#nav ul li{        display: inline-block;        list-style: none;        width: 14%;        height: 60px;        line-height: 60px;        text-align: center;        margin-right: 2%;

}    #nav ul li a{        text-decoration: none;        color: #fff;    }

</style>

下面用js实现动画效果

<script>

var active = document.querySelector(".active"); var lis = document.querySelectorAll("li");   //初始化请给目标位置，速度，当前位置设置为0，不设的话，下面记录不到开始做动画的位置，导致target没变化
     var target =0,leader= 0,current =0;
     for(var i=0;i<lis.length;i++){
         lis[i].onmouseover = function(){
             target = this.offsetLeft;
         }
         lis[i].onmouseout = function(){
             target =current ;
         }
         lis[i].onclick = function(){
             current = this.offsetLeft;
         }

     }  //设置缓动动画
     function donghua(){        //速度
         leader =leader+ (target-leader)/10;        //谁做动画就写谁
         active.style.left =leader + "px";
     }  //启动动画
     setInterval(donghua,10);
 </script>