脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery多级下拉菜单jDropMenu

jQuery实现多级下拉菜单jDropMenu的方法

 更新时间：2015年08月28日 15:32:34   作者：企鹅  
这篇文章主要介绍了jQuery实现多级下拉菜单jDropMenu的方法,涉及jquery鼠标事件及页面元素遍历的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法。分享给大家供大家参考。具体如下：

这里介绍的jQuery多级下拉菜单导航-多级下拉菜单，英文名叫 DropDown Menu。通过 each() 遍历添加相应的处理事件 mouseover,mouseout 和 tab 操作的支持。这个效果是我们平时最常见的一个效果之一，也是一个十分实用的一个 JavaScript 特效。例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-nlevel-down-show-jdropmenu-codes/

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jDropMenu - jQuery 多级下拉菜单插件</title>
<style type="text/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;
} 
</style>
</head>
<body>
<div class="header">
 <h1>jDropMenu - jQuery 多级下拉菜单插件</h1>
</div>
<div id="top-navigation"> 
<ul class="menu" id="menu-top-navigation">
 <li class="menu-item">
 <a href="#">Home</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">Frontend</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item">
 <a href="#">HTML5</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JSON</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">HTML5</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item">
 <a href="#">HTML5</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item">
 <a href="#">JSON</a>
 </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item">
 <a href="#">JSON</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">PHP</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">WordPress</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">WP Themes</a>
 </li>
 <li class="menu-item">
 <a href="#">WP Plugins</a>
 </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">SEO</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">Video</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">Downloads</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item">
 <a href="#">HTML5</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JSON</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">HTML5</a>
 <ul class="sub-menu">
 <li class="menu-item">
 <a href="#">XHTML</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS</a>
 </li>
 <li class="menu-item">
 <a href="#">HTML5</a>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item">
 <a href="#">JSON</a>
 </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">CSS 3</a>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">JavaScript</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item has-sub-menu">
  <a href="#">YUI</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
  </li>
 </ul>
 </li>
 <li class="menu-item has-sub-menu">
 <a href="#">DOM</a>
 <ul class="sub-menu">
  <li class="menu-item">
  <a href="#">jQuery</a>
  </li>
  <li class="menu-item">
  <a href="#">YUI</a>
  </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">Ajax</a>
 </li>
 <li class="menu-item">
 <a href="#">JSON</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="menu-item">
 <a href="#">About Us</a>
 </li>
</ul>
</div>
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/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); 
 </script> 
 <script type="text/javascript">
 (function(){
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-4473199-1']);
 _gaq.push(['_trackPageview']);
 (function(){
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
 })();
 })();
 </script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery实现导航栏头部菜单项点击后变换颜色的方法

    jQuery实现导航栏头部菜单项点击后变换颜色的方法

    这篇文章主要介绍了jQuery实现导航栏头部菜单项点击后变换颜色的方法,涉及jQuery响应鼠标事件针对页面元素的遍历及属性变换相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • jQuery实现全选&全不选&非全选

    jQuery实现全选&全不选&非全选

    本文主要介绍了jQuery实现全选&全不选&非全选,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • jQuery过滤选择器详解

    jQuery过滤选择器详解

    本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下
    2015-01-01
  • jquery中ajax函数执行顺序问题之如何设置同步

    jquery中ajax函数执行顺序问题之如何设置同步

    这篇文章主要介绍了jquery中ajax函数执行顺序问题之如何设置同步,需要的朋友可以参考下
    2014-02-02
  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    使用jQuery制作遮罩层弹出效果的极简实例分享

    这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下
    2016-05-05
  • 使用jQuery获取所有标签的实现代码

    使用jQuery获取所有标签的实现代码

    在前端开发中,使用jQuery能够方便地操作DOM元素,有时候我们需要获取页面上所有的HTML标签,可以通过jQuery来实现,本文将介绍如何使用jQuery获取所有的标签,并展示一个简单的示例代码,需要的朋友可以参考下
    2024-09-09
  • jquery插件jTimer(jquery定时器)使用方法

    jquery插件jTimer(jquery定时器)使用方法

    很多时候我们需要按时间间隔执行一个任务,当满足一定条件时停止执行.此插件旨在解决这一经常遇到的问题
    2013-12-12
  • jQuery给元素添加样式的方法详解

    jQuery给元素添加样式的方法详解

    这篇文章主要介绍了jQuery给元素添加样式的方法,结合实例形式详细分析了jQuery给元素添加样式的各种常见操作技巧,需要的朋友可以参考下
    2015-12-12
  • jQuery Ajax 全解析

    jQuery Ajax 全解析

    本文地址: jQuery Ajax 全解析 本文作者：QLeelulu
    2009-02-02
  • jQuery实现CheckBox全选、全不选功能

    jQuery实现CheckBox全选、全不选功能

    这篇文章主要介绍了jQuery实现CheckBox全选、全不选功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-01-01

最新评论