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

1、通用无限极下拉菜单的实现代码_ 下拉菜单在我开发中常常遇到，但是没个项目都需要从新编写，改起来虽然简洁但是很麻烦，我这个人还是比较懒的，今日有时间把我以前的项目开发中的菜单整理一遍，编写一个通用版本，以后就不需要那么麻烦了。 特点 今日整理的菜单是由jquery+css开发有如下特点： 一、通用性强 以前在用的一个下拉菜单有个问题，需要对主导航和子菜单进行单独的设置，比如，二级菜单是class="first_menu",三级菜单是class="second_menu".依次类推，这样的写法有个问题就是不利于程序员执行循环输出，而本菜单只需引入一个CSS样

2、式即可，无需对多级菜单定义。 二、美观自动调用下拉指示 以前我们手工会对下拉菜单添加一个下拉展现的class，而现在，只需要在css中定义好下拉效果的样式，代码会自动查找下拉菜单并且添加指示箭头； 三、调用简洁 程序员输出列表简洁不需要许多的推断，只要递归调用菜单数据即可。 实现 一、HTML代码 首先我们在页面输出菜单数据，这些数据用ul和li组成构成菜单列表。具体结构代码如下所示： ul class="Menue" li class="Menue_li"a href="#"首页/a/li li class="Menue_

3、li"a href="#"菜单一/a ul class="sub_menu" lia href="#"过山车/a/li lia href="#"火山爆发/a/li lia href="#"小小鸟/a/li /ul /li li class="Menue_li"a href="#"菜单二/a ul class="sub_menu" lia href="#"关于我们/a ul class="sub_m

4、enu" lia href="#"山高地缘/a ul class="sub_menu" lia href="#"飞鸽传书/a/li lia href="#"生生世世/a/li lia href="#"飞黄腾达/a/li /ul /li lia href="#"数据库/a ul class="sub_menu" lia href="#"数据库表/a/li lia href="#"数据加密/a/li lia h

5、ref="#"数据建模/a/li /ul /li lia href="#"C摄像头/a/li /ul /li lia href="#"测试产品/a/li /ul /li /ul 一些基本的html代码，很简洁无需说明代码含义，强调一下代码结构：无论是二级、三级还是几级菜单主要是嵌套ul即可；样式表名称也特别单一，子菜单就是“sub_menu”样式，这样特别有利于程序代码循环调用。 二、CSS样式 Css样式代码也特别简洁，具体代码如下： a text-decoration:none; ul, li list-style:none; m

6、argin: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

7、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

8、 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

9、; 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:#

10、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)为“坐标原始点

11、”进行定位，位置由 Top、Right、Bottom、Left 属性决定。 (2). 父级有 position 属性，父级的“坐标原始点”为原始点。 relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用。 以上两种区分很重要，是非常常用的一个技巧，肯定要区分开，本人在开发中就铺张了许多时间找问题其实就是由于这两个属性引起的。 2、background-position用法 有时候我

12、们为了提升网站速度和网站管理便利，常常把一些美化常用的小图片放在一张大图片上，css需要相应的小图片时就可以通过这个方法来实现，只要弄明白什么意思调用起来非常便利。这个方法说明白点就是图片截取功能，用法具体说明如下： 语法： background-position : length | length background-position : position | position 取值： length : 百分数 | 由浮点数字和单位标识符组成的长度值。 position :top | center | bottom | left | center | right 说明： 设置或检索对象的背

13、景图像位置。必需先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。假如只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。假如指定了两个值，其次个值将用于纵坐标。假如设置值为 right center ，由于 right 作为横坐标值将会掩盖 center 值，所以背景图片将被居右定位。下面是一些等式 top left, left top 等价于 0% 0%. top, top center, center top 等价于 5

14、0% 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% 三、J

15、S代码 本菜单是以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_m

16、enu").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() $(t

17、his).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()