首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 28, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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实现多级下拉菜单jDropMenu的方法

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
greenlet(1) pytest(3) 信息校验(1) list(1) find(1) csv(4) gevent(1) Coroutine(1) 进销存(1) Excel(4)
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
phpmyadmin操作流程
2006/10/09 PHP
漂亮但不安全的CTB
2006/10/09 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
轻松创建nodejs服务器（1）：一个简单nodejs服务器例子
2014/12/18 NodeJs
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
2017/01/24 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何清空python的变量
2020/07/05 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
GWT的应用有哪两种部署模式
2012/12/21 面试题
大学四年规划书范文
2013/12/27 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
仓库组长岗位职责
2014/01/29 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014财务年度工作总结
2014/11/11 职场文书
实习护士自荐信
2015/03/25 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers