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
     }

   });

 }

点击如下所示:

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

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

时间: 2017-07-19

原生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实现的比较经典实用的触发型导航菜单

经典实用的触发型导航菜单 .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实现多选项切换导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>多选项切换导航菜单</title> </head> <style type="text/c

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

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

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

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

非常酷的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左侧三级菜单导航实例代码

效果演示:  实例代码: 复制代码 代码如下: <!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中用三种方式实现导航菜单中的二级下拉菜单

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

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

最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用. 如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin

js实现简洁大方的二级下拉菜单效果代码

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/

js+css实现超简洁的二级下拉菜单效果代码

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法

小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),今天给大家介绍Angular js 实现添加用户.修改密码.敏感字.下拉菜单的综合操作方法,具体内容如下所示: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

jquery实现漂亮的二级下拉菜单代码

本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

jquery实现平滑的二级下拉菜单效果

本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>

jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

jquery实现鼠标滑过显示二级下拉菜单效果

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>