导航和菜单的教程二

jQuery 实现多级下拉菜单导航( 说的很详细)　 http://www.yaohaixiao.com/frontend/javascript-dom-programming-tutorial-how-to-achieve-multi-level-drop-down-menu/

最好看原文，原文排版比较好

多级下拉菜单，英文名叫 DropDown Menu。这个效果是我们平时最常见的一个效果之一，也是一个十分实用的一个 JavaScript 特效。例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果。如图：


多级下拉菜单的 XHTML 结构

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

<ul class="menu" id="menu-top-navigation">
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/">Home</a>
    </li>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/category/frontend/">Frontend</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/xhtml/">XHTML</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/css/">CSS</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/html5/">HTML5</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/css3/">CSS 3</a>
            </li>
            <li class="menu-item has-sub-menu">
                <a href="http://www.yaohaixiao.com/category/frontend/javascript/">JavaScript</a>
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="http://www.yaohaixiao.com/category/frontend/jquery/">jQuery</a>
                    </li>
                    <li class="menu-item">
                        <a href="http://www.yaohaixiao.com/category/frontend/yui/">YUI</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/dom/">DOM</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/Ajax/">Ajax</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/json/">JSON</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/category/php/">PHP</a>
    </li>
    <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>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/category/seo/">SEO</a>
    </li>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/category/video/">Video</a>
    </li>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/category/downloads/">Downloads</a>
    </li>
    <li class="menu-item">
        <a href="http://www.yaohaixiao.com/about-us/">About Us</a>
    </li>
</ul>

选择合理的 XHTML 标签
因为这个效果是一个导航菜单，所以我们应该选择使用 ul 和 li 标签，因为 ul 标签的意思就是一个无序列表。而且是一个多级的菜单，所以我们看到 XHTML 代码使用了多级嵌套的 ul 标签组合。

选择的标签结构是否合理，我们马上就可以看到，下图为多级下拉菜单在无 CSS 渲染的情况下，页面的显示效果：



怎么样，即便没有 CSS 渲染，你也可以很清晰的看出多级下拉菜单的目录层次结构。

给 XHTML 标签添加语义化的属性/值
充分结构化的 XHTML 代码除了选择正确的 XHTML 标签之外，属性值的命名也是有讲究的。 注意看上面的 XHTML 代码，主菜单 ul 标签我们使用了 class="menu"，而子菜单的 ul 标签我们则使用了 class="sub-menu"。怎么样，光从两个 class 的名称你就看得出主菜单和子菜单的区别了。

XHTML 代码的属性/值语义化，名字应该简介易懂，能够表达出显示数据的结构或者类型。另外，我推荐大家采用英文小写加“-”横线链接符的命名方法。“-”在英文中常作单词分割符号，对搜索引擎来说，分开的单词的组合命名方式它也更易于理解。名字取得好的属性值对 SEO 也会产生一定的效果。

好了， 接着看每个菜单项 li 的属性值，class="menu-item" 和 class="menu-item has-sub-menu"。同样也不用我多解释，class 的名字就很能够说明问题，非常的易懂。.has-sub-menu 就表明了该菜单项是有子菜单的。而且这么写，另外一个作用就是考虑到给含有子菜单的 li 标签添加特殊的样式以区别没有子菜单的菜单项。

充分结构化（语义化）的 XHTML 代码要做到可读性好。可读性好，结果就是维护起来会更方便，即使团队里其它的人来接手你的工作，也可以很容易的理解你的代码，继续下面的维护工作。也可以起到减少维护成本，提高开发效率的作用。

接下来你还会看到因为 XHTML 结构合理，XHTML 代码的嵌套少，会便于使用 CSS 添加样式，同时也会让 JavaScript 遍历查找 DOM 元素，只需要查找少量的 DOM 节点就可以搞定了。内行看门道，现在看出一个结构良好的 XHTML 代码的作用了吧。

多级下拉菜单的 CSS 定位技巧
接下来看看要怎么用 CSS 来处理多级下拉菜单的显示的，这里有这 3个值得注意的地方：
1. 有下子菜单的 li 标签样式应该于没有的不一样，而且一级菜单中有子菜单 li 标签的样式，跟子菜单中有子菜单的 li 的标签又不一样；
2. 子菜单显示的位置在 li 标签范围之外，而且一级子菜单和更次级的子菜单的显示位置又不一样；
3. 子菜单应该盖住下面的区域（banner 和 container 博客文章列表）；

以下是完整的 CSS 代码：

#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 标签同样也只是用了 class="has-sub-menu" 的处理，怎么实现右边框是蓝色的呢？

.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 问题分析》 http://www.yaohaixiao.com/frontend/css-zindex/做为这个章节的标题。因为谈到 position 定位，就必须使用 z-index 来处理层于层之前的遮盖关系（请允许我这么说），具体的知识点就需要大家详细参考《CSS 定位之 z-index 问题分析》、《CSS z-index 属性的使用方法和层级树的概念》和 W3C 的《Positioning schemes》 http://www.yaohaixiao.com/frontend/css-z-index-property-and-layering-tree/。我这里就直接把我的处理代码给出：

.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 class="menu-item">
        <a href="http://www.yaohaixiao.com/category/frontend/">Frontend</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/xhtml/">XHTML</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/css/">CSS</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/html5/">HTML5</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/css3/">CSS 3</a>
            </li>
            <li class="menu-item has-sub-menu">
                <a href="http://www.yaohaixiao.com/category/frontend/javascript/">JavaScript</a>
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="http://www.yaohaixiao.com/category/frontend/jquery/">jQuery</a>
                    </li>
                    <li class="menu-item">
                        <a href="http://www.yaohaixiao.com/category/frontend/yui/">YUI</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/dom/">DOM</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/Ajax/">Ajax</a>
            </li>
            <li class="menu-item">
                <a href="http://www.yaohaixiao.com/category/frontend/json/">JSON</a>
            </li>
        </ul>
    </li>

可以看到 Frontend 栏目下有两个 .sub-menu（子栏目），而属于它的下一级的子菜单应该是第一个。所以要找到对应的子菜单要这么处理：

// 找到对应层级的子菜单很简单，第一个子菜单就是对应层级的
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 主题的自定义菜单显示。

最后，希望看完这篇文章后，对想了解如何实现多级下拉菜单的这个效果原理的朋友有帮助。也谢谢你看我唠叨了半天！