- 浏览: 3364927 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
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 代码如下:
选择合理的 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 代码:
给子菜单的 li 标签添加 CSS 样式
其实在一开始写 XHTML 代码的时候,就考虑到了这个问题,已经给有子菜单的 li 标签加上了 .has-sub-menu 类。来看看一级菜单的 li 标签的 CSS 样式代码吧:
很简单,有一个 3px 的蓝色的上边框,行高则当然也要写成 33px 而非普通的 36px 了(我没有给有下拉菜单做向下箭头的背景图标,如果你喜欢就做成有背景图标的。不过 CSS 会更复杂,或者又要做 sprites 优化性能,我就算了。)。而更次级的子菜单有下拉菜单的 li 标签同样也只是用了 class="has-sub-menu" 的处理,怎么实现右边框是蓝色的呢?
选择这样的后代选择器,利用它在 CSS 中优先级比之前的要高,覆盖掉一级菜单项的样式。这样以来二级一下的子菜单中有子菜单的 li 的显示样式就是行高为 36px、宽度为112px、右边框为 3px 蓝色。
使用 position 给子菜单定位
子菜单的显示位置有2两种情况:第一,一级子菜单在当前菜单 li 的底部显示。第二,一级子菜单下的子菜单则显示在当前菜单 li 标签的右边。说道定位则肯定要使用到 position:relative 和 position:absolute; 结合使用了:
要让子菜单相对上级菜单的位置显示(也就上级 li 标签的位置显示),那么就一定要给上级的 li 标签设置:position:relative;,这样我们再给子菜单设置 position:absolute;,这时子菜单才是相对上级菜单位置开始定位 top 和 left。如果给上级菜单 li 标签设置 position:relative,而直接给子菜单设置 position:absolute;,那么子菜单的 定位起始位置则是根据 body 标签的最左上方位置开始计算 top 和 left 值了。这个是 position:relative 和 position:absolute; 定位位置关系的基础知识了。
温习完了 position 定位的基础知识后,我们又要使用性能低但层级比较高的选择器把二级以下的子菜单定位到当前菜单的右边:
还是利用后代选择器,这样我们就可以在只给子菜单设置相同的 ..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 的 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 实现的完整代码吧:
我的注释已经写的十分清除了,让鼠标划过 li 显示子菜单,离开时隐藏子菜单。jQuery 实现这个效果的代码再简单不过,用 $(li).hover(show,hide) 就实现了,我想大家都知道了。这里我想要讲的处理技巧是如何找到当前菜单的子菜单的处理:
结合 XHTML 代码你就会清楚为什么 $(subMenuItem, curMenu); 找到的是当前栏目全部的子菜单(栏目)了。
可以看到 Frontend 栏目下有两个 .sub-menu(子栏目),而属于它的下一级的子菜单应该是第一个。所以要找到对应的子菜单要这么处理:
另外,为了让看起来更专业些,同时对用户很友好一些,我给这个多级下拉菜单添加了 tab 键切的显示/隐藏菜单的支持,这里的处理技巧需要要说一下:
tab键控制子菜单的隐藏和显示的关键点是要明白获得焦点显示子菜单的 a 标签和失去焦点关闭子菜单的 a 标签不是同一个。看看 XHTML 代码就知道了。
a 标签(WordPress 链接)获得焦点就应该显示它的 .sub-menu 了。而要隐藏子菜单,则应该是在子菜单的最后一个链接( WP Plugin 链接)失去焦点的时候关闭它。所以才需要使用 curSubMenuLastItem = curSubMenu.find('a:last'); 获得当前子菜单的最后一个 a 标签的处理,然后给它绑定失去焦点隐藏子菜单。
好了,如何利用 jQuery 实现多级下来菜单到这里就说讲解完了,另外,这个 JavaScript 脚本一开始是给 WordPress 的导航添加多级菜单的支持写的,可以直接用于 WordPress 主题的自定义菜单显示。
最后,希望看完这篇文章后,对想了解如何实现多级下拉菜单的这个效果原理的朋友有帮助。也谢谢你看我唠叨了半天!
最好看原文,原文排版比较好
多级下拉菜单,英文名叫 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 主题的自定义菜单显示。
最后,希望看完这篇文章后,对想了解如何实现多级下拉菜单的这个效果原理的朋友有帮助。也谢谢你看我唠叨了半天!
发表评论
-
echart使用记录
2016-06-22 09:24 1762ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1527原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1180http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1172http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1235http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 969http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1422http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1569介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1591资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4307JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 963原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 987http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 2007http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 939[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 504http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1006HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 968http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1009详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 930http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 936http://my.oschina.net/zhangxuma ...
相关推荐
导航菜单是一个网站最为重要的元素之一,一个设计良好的导航菜单可让网站的结构清晰、一目了然。本文向你推荐 30 个 jQuery 的导航菜单插件和教程,以供参考。
用纯css3技术实现的带动画效果的质感二级导航菜单,没有用到js和图片,全部用css3实现。可以访问下面的链接查看示例和教程。
老二牛教育程矢 Axure夜话之Axure基础系列视频教程之下拉导航菜单.zip html原型文件
硕思闪客菜单制作flash导航条图文教程.docx
老二牛车教育程矢 Axure夜话之Axure基础系列视频教程之下拉导航菜单
jQuery黑色下拉菜单导航特效代码,是一款黑色炫酷的jquery菜单导航特效!点击小按钮会弹出二级菜单名称列表!很苦的效果,值得拥有!B5教程网推荐下载!
为了让大家更好的理解如何通过CSS来设计,Webjx为大家收集了30个基于CSS的导航菜单和按钮的CSS设计教程,通过这些教程,您可以在您今后的项目中更方便的直接使用或参考,当然也可以用作平时的实践练习。希望大家能从...
水平菜单春代码,很不错的网站导航哦哦哦 推荐学习
网页设计与制作教程(HTMLCSSJavaScript)第2版第9章使用CSS制作导航菜单.pptx
有关导航组件的教程,以学习使用导航图、添加顶部菜单、通过安全参数传递参数、结合不同的MaterialDesign小部件.zip
老二牛车教育程矢Axure夜话之Axure手机原型视频教程之侧滑菜单 抽屉导航 rar
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...
明天教育网站下拉二级导航菜单基于jquery.1.3.2.js制作,效果不错,有首页、学院、课程、讲师、学员、新闻活动、论坛、FAQ、教程等菜单栏目。
CSS抽屉导航菜单(无JS)
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。效果图如下: 实现的代码。 ...
json生成bootstrap无限极菜单。 使用教程:http://blog.csdn.net/u012775558/article/details/70159453
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8、火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧。 运行效果截图如下: 在线演示地址如下: ...
之前分享了很多纯css的导航菜单,今天介绍一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计。需要的朋友可以参考下
Flash效果渐隐下拉菜单特效