响应式手风琴效果导航

Posted 2020-09-03 风起了--

此处代码为了实现手风琴效果，效果实现为，鼠标移动每一个组件上，背景（并不是真的背景）也会移动到当前组件上，鼠标离开后，再回到起始位置点，若点击，停留在当前位置。此单航是响应式的，设置最小宽度为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>