jQuery 实现多级上拉菜单导航

jQuery 实现多级下拉菜单导航
JavaScript 实例教程 – jQuery 实现多级下拉菜单导航
链接：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3087236&reltid=3040304&pre_thread_id=0&pre_pos=2&ext=


多级下拉菜单，英文名叫 DropDown Menu。这个效果是我们平时最常见的一个效果之一，也是一个十分实用的一个 JavaScript 特效。例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果。前端开发的3大知识点：XHTML、CSS 和 JavaScript 这3个方面说起。

多级下拉菜单的 XHTML 结构
前端开发的一切基础都是从拥有良好结构的 XHTML 代码说起的，以本站的主导航菜单为例，菜单的 HTML 代码如下：


<ul id="menu-top-navigation">

    <li 和 name="code">#top-navigation { margin: 10px auto 600px; width:960px; height:36px; } .menu { margin: 0; } .menu-item { position: relative; z-index: 2; float: left; margin-left: 3px; font-size: 14px; width: 115px; line-height: 36px; list-style-type: none; text-align: center; display: inline; } .menu .has-sub-menu { border-top: 3px solid #369; line-height: 33px; } .sub-menu .has-sub-menu { border-top: none; line-height: 36px; border-right: 3px solid #369; width: 112px; } .menu-item a:link, .menu-item a:visited, .menu-item a:hover { font-weight: bold; display: block; width: 100%; background-color: #3B3939; color: #fff; overflow: hidden; } .menu-item a:hover { color: #009FBC; background-color: #FFF; text-decoration: none; } .menu-item .sub-menu { display: none; position: absolute; z-index: 3; top: 33px; left: 0; margin: 0; box-shadow: 0 3px 10px #333; width: 115px; } .sub-menu li { margin-left: 0; } .sub-menu .sub-menu { top: 0; left: 115px; z-index: 4; }

给子菜单的 li 标签添加 CSS 样式
其实在一开始写 XHTML 代码的时候，就考虑到了这个问题，已经给有子菜单的 li 标签加上了 .has-sub-menu 类。来看看一级菜单的 li 标签的 CSS 样式代码吧：

.menu .has-sub-menu {     border-top: 3px solid #369;     line-height: 33px; }

很简单，有一个 3px 的蓝色的上边框，行高则当然也要写成 33px 而非普通的 36px 了（我没有给有下拉菜单做向下箭头的背景图标，如果你喜欢就做成有背景图标的。不过 CSS 会更复杂，或者又要做 sprites 优化性能，我就算了。）。而更次级的子菜单有下拉菜单的 li 标签同样也只是用了 的处理，怎么实现右边框是蓝色的呢？

.sub-menu .has-sub-menu {     border-top: none; /* 清除一级子菜单的上边框 */     line-height: 36px; /* 让更次级子菜单的行高恢复为 36px */     border-right: 3px solid #369;     width: 112px; }

选择这样的后代选择器，利用它在 CSS 中优先级比之前的要高，覆盖掉一级菜单项的样式。这样以来二级一下的子菜单中有子菜单的 li 的显示样式就是行高为 36px、宽度为112px、右边框为 3px 蓝色。
使用 position 给子菜单定位

子菜单的显示位置有2两种情况：第一，一级子菜单在当前菜单 li 的底部显示。第二，一级子菜单下的子菜单则显示在当前菜单 li 标签的右边。说道定位则肯定要使用到 position:relative 和 position:absolute; 结合使用了：

.menu-item {     position: relative;     z-index: 2;     float: left;     margin-left: 3px;     font-size: 14px;     width: 115px;     line-height: 36px;     list-style-type: none;     text-align: center;     display: inline; } .menu-item .sub-menu {     display: none;     position: absolute;     z-index: 3;     top: 33px;     left: 0;     margin: 0;     box-shadow: 0 3px 10px #333;     width: 115px; } /* 子菜单不需要像一级菜单那样间隔5个像素排列，所以清除左边距 */ .sub-menu li {     margin-left: 0; } .sub-menu .sub-menu {     top: 0;     left: 115px;     z-index: 4; } 

要让子菜单相对上级菜单的位置显示（也就上级 li 标签的位置显示），那么就一定要给上级的 li 标签设置：position:relative;，这样我们再给子菜单设置 position:absolute;，这时子菜单才是相对上级菜单位置开始定位 top 和 left。如果给上级菜单 li 标签设置 position:relative，而直接给子菜单设置 position:absolute;，那么子菜单的 定位起始位置则是根据 body 标签的最左上方位置开始计算 top 和 left 值了。这个是 position:relative 和 position:absolute; 定位位置关系的基础知识了。

温习完了 position 定位的基础知识后，我们又要使用性能低但层级比较高的选择器把二级以下的子菜单定位到当前菜单的右边：

.sub-menu .sub-menu {     top: 0;     left: 115px;     z-index: 4; }

还是利用后代选择器，这样我们就可以在只给子菜单设置相同的 ..sub-menu 类选择器的情况下实现让不同层级的子菜单在不同位置定位显示了。

到目前为止，我们已经做好了子菜单的定位，但是正如前面提到的，子菜单在上级菜单 li 标签的区域之外。如何让子菜单可见？

细心的你应该发现了，在之前给出的完整的菜单的 CSS 代码中，你没有发现 overflow:hidden;，还有我没有设置 li 的 height 值，而只是设置了 line-height:36px;。这里利用了 overflow 默认值是 auto，同时不设置 height 而是利用 line-height: 36px; 去模拟 min-height: 36px;。然后设置 a 标签 display: block;width: 100%;，让 a 标签在不同层级的 .has-sub-menu 菜单项中自动适应，占满整个 li 标签的显示区域。不错的技巧吧！

子菜单在 li 外显示的问题解决了，接下来就是要处理怎么让子菜单超出头部的区域也显示出来，而且要盖住下面的 banner 区域和文章列表。

CSS 定位之 z-index 问题分析
我干脆用之前转载的文章《CSS 定位之 z-index 问题分析》做为这个章节的标题。因为谈到 position 定位，就必须使用 z-index 来处理层于层之前的遮盖关系（请允许我这么说），具体的知识点就需要大家详细参考《CSS 定位之 z-index 问题分析》、《CSS z-index 属性的使用方法和层级树的概念》和 W3C 的《Positioning schemes》。我这里就直接把我的处理代码给出：

.header {     position: relative;     z-index: 2;     padding-bottom: 0;     overflow: visible; }

设置 header 的 overflow: visible;，让子菜单超出 header 的部分可见。而且显式地设置 position:relative 和 z-index:2 后，header 就可以盖住下面的内容。而 .sub-menu 的 z-index 值为3，所以只要 header 可以盖住的内容，.sub-menu 都可以盖住的。OK，CSS 的布局问题都解决了。

多级下拉菜单的 JavaScript DOM 编程
有了好的 XHTML 代码，有了 CSS 控制菜单的定位问题。JavaScript DOM 编程要处理的事情其实很简单了：鼠标放到有子菜单的 li 标签上，让子菜单 display:block;。

废话几句，千万不要做让 JavaScript 计算上级菜单 li 标签的高度和宽度，然后再让 JavaScript 计算 top 和 left 值。虽然看上去让人觉得这个程序很“智能”，不过我认为这是“智障”，把原本应该让 CSS 处理的问题留给JavaScript 处理。千万别这么做！

看看 JavaScript 实现的完整代码吧：

(function($){     $.fn.extend({         dropMenu: function(menuItem, subMenuItem){             var root = $(this), // 首先找到菜单（的根节点） CLS_HAS_MENU = 'has-sub-menu', isIE = $.browser.msie, // 是否为 IE 浏览器 version = $.browser.version; // 浏览器的版本             // 没有找到菜单则退出             // root.find(':first') 都是得到 document.getElementById('top-navigation')             if (!root[0]) {                 return false;             }                          // 默认的菜单标签为 li 标签（选择器）             if (!menuItem) {                 menuItem = 'li';             }                          // 默认的子菜单标签为 ul 标签（选择器）             if (!subMenuItem) {                 subMenuItem = 'ul';             }                          // $(root).find(menuItem) 找到导航菜单下所有的 li 节点             // 通过 each() 遍历添加相应的处理事件 mouseover,mouseout 和 tab 操作的支持             $(root).find(menuItem).each(function(i, li){                 var curMenu = $(li),                // 找到 li 下的第一个 a 标签，添加 tab 键的支持时需要用到的                 curLink = curMenu.is('a') ? curMenu : $(curMenu.find('a:first')),                // 找到当前 li 标签下的子菜单                 subMenus = $(subMenuItem, curMenu),                // 判断是否有子菜单节点                 hasMenu = subMenus.length >= 1,                // 当前 li 标签下的子菜单                 curSubMenu = null,                // 当前子菜单的最后一项（a 标签）                 curSubMenuLastItem = null,                // 显示子菜单                 show = function(){                     // show sub menu 发现 IE6 中使用 show() 方无法显示二级以下的子菜单                     // 所以很无赖的 hack 了一下                     if (!isIE || (isIE && version > 6)) {                         curSubMenu.show(200);                     }                     else {                         curSubMenu.css('display', 'block');                     }                 },                // 隐藏子菜单                 hide = function(){                     // hide sub menu                     if (!isIE || (isIE && version > 6)) {                         curSubMenu.hide(150);                     }                     else {                         curSubMenu.css('display', 'none');                     }                 };                                 // 只在有子菜单的时候才做相应的处理                 if (hasMenu) {                     // 无赖 WordPress 的输出没有 .has-sub-menu                     // 只要自己手动加上了                     curMenu.addClass(CLS_HAS_MENU);                     // 找到当前 li 对应的子菜单，而不是把更次级的子菜单都找到                     // 不习惯用 subMenus.get(0)                     curSubMenu = $(subMenus[0]);                     // 当前子菜单的最后一项（a 标签）                     curSubMenuLastItem = curSubMenu.find('a:last');                                          // mouse event                     curMenu.hover(show, hide);                     // key(tab key) event                     // 获得焦点是在当前 li 下的第一个A标签上处理                     curLink.focus(show);                     // 失去焦点则需要是tab让子菜单的最后一个菜单项都走过了，才关闭子菜单                     curSubMenuLastItem.blur(hide);                 }             });         }     });         $('#top-navigation').dropMenu();     })(jQuery);

我的注释已经写的十分清除了，让鼠标划过 li 显示子菜单，离开时隐藏子菜单。jQuery 实现这个效果的代码再简单不过，用 $(li).hover(show,hide) 就实现了，我想大家都知道了。这里我想要讲的处理技巧是如何找到当前菜单的子菜单的处理：

// submenus 找到的当前菜单项下所有的子菜单，而并非当前菜单对应层级的子菜单 subMenus = $(subMenuItem, curMenu); // 找到对应层级的子菜单很简单，第一个子菜单就是对应层级的 curSubMenu = $(subMenus[0]);

结合 XHTML 代码你就会清楚为什么 $(subMenuItem, curMenu); 找到的是当前栏目全部的子菜单（栏目）了。

<li name="code">
// 找到对应层级的子菜单很简单，第一个子菜单就是对应层级的 curSubMenu = $(subMenus[0]);

另外，为了让看起来更专业些，同时对用户很友好一些，我给这个多级下拉菜单添加了 tab 键切的显示/隐藏菜单的支持，这里的处理技巧需要要说一下：
// key(tab key) event // 获得焦点是在当前 li 下的第一个A标签上处理 curLink.focus(show); // 失去焦点则需要是tab让子菜单的最后一个菜单项都走过了，才关闭子菜单 curSubMenuLastItem.blur(hide);

tab键控制子菜单的隐藏和显示的关键点是要明白获得焦点显示子菜单的 a 标签和失去焦点关闭子菜单的 a 标签不是同一个。看看 XHTML 代码就知道了。
<li class="menu-item has-sub-menu">         <a href="http://www.yaohaixiao.com/category/wordpress/">WordPress</a>         <ul class="sub-menu">             <li class="menu-item">                 <a href="http://www.yaohaixiao.com/category/wordpress/wp-themes/">WP Themes</a>             </li>             <li class="menu-item">                 <a href="http://www.yaohaixiao.com/category/wordpress/wp-plugins/">WP Plugins</a>             </li>         </ul>     </li>

a 标签（WordPress 链接）获得焦点就应该显示它的 .sub-menu 了。而要隐藏子菜单，则应该是在子菜单的最后一个链接( WP Plugin 链接)失去焦点的时候关闭它。所以才需要使用 curSubMenuLastItem = curSubMenu.find('a:last'); 获得当前子菜单的最后一个 a 标签的处理，然后给它绑定失去焦点隐藏子菜单。
 
好了，如何利用 jQuery 实现多级下来菜单到这里就说讲解完了，另外，这个 JavaScript 脚本一开始是给 WordPress 的导航添加多级菜单的支持写的，可以直接用于 WordPress 主题的自定义菜单显示。
 

 

查看更多 下一篇