首页
所有分类
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下异步提交表单 异步跨域提交表单
Nov 17 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
vue使用exif获取图片旋转，压缩的示例代码
Dec 11 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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
IIS(7) 动静分离(1) Windows server 2016(6) 负载均衡(6) https(7) Windows server 2019(5) Telnet(1) http(6) 远程控制(1) 生成缩略图(1)
You might like
DW中链接mysql数据库时，建立字符集中文出现乱码的解决方法
2010/03/27 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP类的特性实例分析
2016/09/28 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php使用lua+redis实现限流，计数器模式，令牌桶模式
2019/04/04 PHP
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript错误处理
2015/02/03 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python安装Scrapy图文教程
2017/08/14 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
编写python代码实现简单抽奖器
2020/10/20 Python
网络工程专业自荐信范文
2014/03/16 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
华清池导游词
2015/02/02 职场文书
企业党建工作总结2015
2015/05/26 职场文书
体育教师研修感悟
2015/11/18 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python