js实现水平滚动菜单导航

项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。

先来看下最终效果：

最终效果

先看html结构:

<div id='root' class="root">
 <ul class="list" id="list">
 <li>全单1</li>
 <li>全部菜2单</li>
 <li>全部3单</li>
 <li>菜单4</li>
 <li>全菜单</li>
 <li>全部5菜单</li>
 <li>全6单</li>
 <li>全6部菜单</li>
 <li>全菜7单</li>
 <li>全8单</li>
 <li>全部5菜单</li>
 <li>全6单</li>
 <li>全6部菜单</li>
 <li>全菜7单</li>
 <li>全8单</li>
 <li>全9部菜单</li>
 <li>全10单</li>
 <li>全11部单</li>
 <li>菜2单</li>
 <li>全菜12单</li>
 <li>全32部菜单</li>
 </ul>
</div>

说一下，末尾我给加了阴影的效果：

.root:before{
 display: block;
 content: '';
 width: 20px;
 height:100%;
 background: rgba(111,111,111,0);
 box-shadow: 2px 2px 32px 2px #999;
 position: absolute;
 right:-20px;
 top:0;
 }

其它的样式代码：

 *{
 margin: 0;
 padding:0;
 font-family: "Microsoft YaHei UI";
 }
 #root{
 height:60px;
 width: 800px;
 white-space: nowrap;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 white-space: nowrap;
 position: relative;
 border-bottom: 1px solid #eee;
 padding-right: 20px;
 background-color: #f5f5f5;
 margin-left: 100px;
 margin-top: 50px;
 }
 .root:before{
 display: block;
 content: '';
 width: 20px;
 height:100%;
 background: rgba(111,111,111,0);
 box-shadow: 2px 2px 32px 2px #999;
 position: absolute;
 right:-20px;
 top:0;
 }
 .list{
 position: absolute;
 left:0;
 top:0;
 /*width: 100%;*/ /*不能为100%，不然宽度只有父容器的宽度，我掉进这个坑了。*/
 transition: all 1s;
 height:100%;
 line-height: 2.5;
 }
 .on{
 color:red;
 font-weight: bold;
 }
 .off{
 color: #000;
 font-weight:normal;
 }
 .list li{
 display: inline-block;
 padding:10px 20px;
 cursor: pointer;
 }

下面是js的逻辑部分:

 var box = document.getElementById('root'); //外面的容器。
 var listBox = document.getElementById('list'); //ul列表。主要是移动它的left值
 var list = document.getElementsByTagName('li');//所有列表元素
 var width = box.clientWidth /2; //为了判断是左滑还是右滑
 var totalWidth = 0; 
 for(let i=0;i<list.length;i++){
  totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度
 }
 for(let i=0;i<list.length;i++){
  var _offset = totalWidth - box.clientWidth; //右边的偏移量
  list[i].addEventListener('click', function (e) {
   for(let j=0;j<list.length;j++){
    list[j].className = 'off'; //移除所有元素的样式
   }
   list[i].className = 'on';  //给点击的元素添加样式
   var offset =totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - （ul容器的左偏移量 + 父容器的宽度）
   if(e.pageX > width && offset > 0){ //点击右侧并且右侧的偏移量大于0，左滑。
    listBox.style.left = (listBox.offsetLeft-200) + 'px';
   }else if(e.pageX > width && offset > 200){ //临界位置，，右侧滚动到末尾
    listBox.style.left = -_offset + 'px';
   }
   if(e.pageX < width && listBox.offsetLeft < -200) { //点击左侧并且左侧的偏移量小于0，左滑。
    listBox.style.left = (listBox.offsetLeft + 200) + 'px';

   }else if(e.pageX < width && listBox.offsetLeft < 0){ //临界位置，左侧滚到开始的位置
    listBox.style.left = 0
   }

  });

 }

点击如下所示：

还有些不完善的地方，求各位大神指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js水平滚动菜单导航 # js水平滚动菜单 # js水平单导航 # 利用Js+Css实现折纸动态导航效果实例源码 # JS+CSS实现鼠标滑过时动态翻滚的导航条效果 # javascript实现的鼠标悬停时动态翻滚的导航条 # JS实现移动端可折叠导航菜单（现代都市风） # JS无限级导航菜单实现方法 # vuejs 切换导航条高亮(路由菜单高亮)的方法示例 # 原生JS实现导航下拉菜单效果 # 如何使用wheelnav.js构建酷炫的动态导航菜单 # 偏移量 # 有机会 # 大神 # 再来 # 我给 # 所示 # 好用 # 能为 # 掉进 # 先看 # 不完善 # 大家多多 # 移除 # 滚动条 # 主要是 # width # content # height # px # abs

返回目录在线咨询

上一篇：Go database/sql 查询结果行数获取策略与实践
下一篇：php如何实现表单数据自动填充_php根据session或数据库回填input值技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js实现水平滚动菜单导航

您的项目需求