通用无限极下拉菜单的实现代码


Posted in Javascript onMay 31, 2016

下拉菜单在我开发中经常遇到,但是没个项目都需要从新编写,改起来虽然简单但是很麻烦,我这个人还是比较懒的,今天有时间把我以前的项目开发中的菜单整理一遍,编写一个通用版本,以后就不需要那么麻烦了。

特点

今天整理的菜单是由jquery+css开发有如下特点:

一、通用性强

以前在用的一个下拉菜单有个问题,需要对主导航和子菜单进行单独的设置,比如,二级菜单是class="first_menu",三级菜单是class="second_menu"....依次类推,这样的写法有个问题就是不利于程序员执行循环输出,而本菜单只需引入一个CSS样式即可,无需对多级菜单定义。

二、美观自动调用下拉指示

以前我们手工会对下拉菜单添加一个下拉展示的class,而现在,只需要在css中定义好下拉效果的样式,代码会自动寻找下拉菜单并且添加指示箭头;

三、调用简单

程序员输出列表简单不需要很多的判断,只要递归调用菜单数据即可。

实现

一、HTML代码

   首先我们在页面输出菜单数据,这些数据用ul和li组成构成菜单列表。具体结构代码如下所示:

<ul class="Menue">

 <li class="Menue_li"><a href="#">首页</a></li>

 <li class="Menue_li"><a href="#">菜单一</a>

  <ul class="sub_menu">

   <li><a href="#">过山车</a></li>

   <li><a href="#">火山爆发</a></li>

   <li><a href="#">小小鸟</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜单二</a>

  <ul class="sub_menu">

   <li><a href="#">关于我们</a>

    <ul class="sub_menu">

     <li><a href="#">山高地缘</a>

      <ul class="sub_menu">

       <li><a href="#">飞鸽传书</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飞黄腾达</a></li>

      </ul>

     </li>

     <li><a href="#">数据库</a>

      <ul class="sub_menu">

       <li><a href="#">数据库表</a></li>

       <li><a href="#">数据加密</a></li>

       <li><a href="#">数据建模</a></li>

      </ul>

     </li>

     <li><a href="#">C摄像头</a></li>

    </ul>

   </li>

   <li><a href="#">测试产品</a></li>

  </ul>

 </li>

</ul>

一些基本的html代码,很简单无需解释代码含义,强调一下代码结构:无论是二级、三级还是几级菜单主要是嵌套ul即可;样式表名称也非常单一,子菜单就是“sub_menu”样式,这样非常有利于程序代码循环调用。

二、CSS样式

Css样式代码也非常简单,具体代码如下:

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*定义菜单*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*下拉菜单样式*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class,去掉border-bottom效果*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}

.Menue li.now,.Menue li.current { background:#f60;color:#fff;}

/*如果有下拉菜单添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/

.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}

.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}

这里我只强调两点注意事项:

1、position中absolute 与 relative区别

absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下:

A、没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点。

B. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下:

 (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定。

  (2). 父级有 position 属性,父级的“坐标原始点”为原始点。

relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用。

    以上两种区别很重要,是十分常用的一个技巧,一定要区别开,本人在开发中就浪费了很多时间找问题其实就是因为这两个属性引起的。

2、background-position使用

有时候我们为了提升网站速度和网站管理方便,经常把一些美化常用的小图片放在一张大图片上,css需要相应的小图片时就可以通过这个方法来实现,只要弄明白什么意思调用起来十分方便。这个方法说明白点就是图片截取功能,用法具体说明如下:

语法:

background-position : length || length

background-position : position || position

取值:

length : 百分数 | 由浮点数字和单位标识符组成的长度值。

position :top | center | bottom | left | center | right

说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。下面是一些等式

top left, left top 等价于 0% 0%.

top, top center, center top 等价于 50% 0%.

right top, top right 等价于 100% 0%.

left, left center, center left 等价于 0% 50%.

center, center center 等价于 50% 50%.

right, right center, center right 等价于 100% 50%.

bottom left, left bottom 等价于 0% 100%.

bottom, bottom center, center bottom 等价于 50% 100%.

bottom right, right bottom 等价于 100% 100%

三、JS代码

本菜单是以jquery为基础的所以首先必须引入jquery代码库,然后编写如下JS代码实现下拉菜单。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 开始*/

 //为子菜单的最后一个li添加样式,适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li,判断是否包含子菜单,如果包含则为其添加箭头指示状态

 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  menu.find("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu 结束*/

})

</script>

通过以上步骤就实现了一个通用的多级菜单,上面代码是本人日常开发中的积累,由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考,谢谢。

以上这篇通用无限极下拉菜单的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
小程序实现上下切换位置
Nov 16 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 #Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 #Javascript
JavaScript中的操作符类型转换示例总结
May 30 #Javascript
jQuery中的通配符选择器使用总结
May 30 #Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 #Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python单例模式实例详解
2017/03/01 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
2015年统计员个人工作总结
2015/07/23 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
html实现弹窗的实例
2021/06/09 HTML / CSS