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


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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
社区交通安全实施方案
2014/03/22 职场文书
运动会口号8字
2014/06/07 职场文书
会计学习心得体会
2014/09/09 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
党校党性分析材料
2014/12/19 职场文书
南京导游词
2015/02/03 职场文书
法制教育观后感
2015/06/17 职场文书
详解JS数组方法
2021/11/20 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python