通用无限极下拉菜单

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

特点

今天整理的菜单是由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>

 

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