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
     }

   });

 }

点击如下所示:

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

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

(0)

相关推荐

  • 一个js控制的导航菜单实例代码

    这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: 复制代码 代码如下: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPa

  • js左侧三级菜单导航实例代码

    效果演示:  实例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lan

  • 非常酷的js图形渐隐导航菜单栏

    body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_

  • 可以媲美Flash的JS导航菜单

    媲美Flash的JS导航菜单 .table1 { BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid } .alp { FILTER: Alpha(Opaci

  • 原生js做的手风琴效果的导航菜单

    做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

  • js实现多选项切换导航菜单的方法

    本文实例讲述了js实现多选项切换导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>多选项切换导航菜单</title> </head> <style type="text/c

  • JS中用三种方式实现导航菜单中的二级下拉菜单

    我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

  • 用js实现的比较经典实用的触发型导航菜单

    经典实用的触发型导航菜单 .sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER- BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDE

  • js导航菜单(自写)简单大方

    最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~ HTML部分 复制代码 代码如下: <h2> SuperFish</h2> <ul class="nav" hid="root"> <li><a href="javascript:void(0)" testid="aa&quo

  • JS实现选中当前菜单后高亮显示的导航条效果

    本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho

随机推荐