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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

#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;
} 




 jDropMenu - jQuery 多级下拉菜单插件

 

 

 Home
 
 

 Frontend
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 
 
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 
 
 
 
 
 

 PHP
 
 

 WordPress
 

 

 WP Themes
 
 

 WP Plugins
 
 
 
 

 SEO
 
 

 Video
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
  
 
  
 
 
 

 Downloads
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 

 

 XHTML
 
 

 CSS
 
 

 HTML5
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 
 
 
 

 CSS 3
 
 

 Javascript
 

  

  jQuery
  
  

  YUI
 

  

  jQuery
  
  

  YUI
  
 
  
 
 
 

 DOM
 

  

  jQuery
  
  

  YUI
  
 
 
 

 Ajax
 
 

 JSON
 
 
 
 
 
 

 about Us
 


 
  
 

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