JavaScript实现滑动导航栏效果

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了JavaScript实现滑动导航栏效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no"> 
<script src="node_modules/jquery/jquery.js"&gt;</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .navScroll{
    position: relative;
  }
  #overflow{      
    width: 100%;
    height: 30px;
    overflow-x: scroll;
  }  
  #overflow .container{
    height: 30px;
  }
  #overflow .container div{
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  #overflow::-webkit-scrollbar {
    display: none;
    -webkit-overflow-scrolling: touch;
  }  
  .navScroll .drop_down{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
  }
  .navScroll .drop_down img{
    width: 100%;
    height: 100%;
  }
  .tabUl.clearFix{
    display: none; 
    width: 100%;
    list-style: none;
    z-index: 10;
    background: rgba(0,.1);
  }
  .tabUl li{
    float: left;
    width: 6.25rem;
    height: 2.65625rem;
    line-height: 2.65625rem;;
    text-align: center;
  }
  .clearFix{
    content: "";
    display: table;
    clear: both;
  }
  div,ul{
    color: #89CFE8;
  }

  #overflow .container div.lastWidth{
    width: 50px;
  }
  .red{
    color: #FF9933;
  }
</style>