jquery实现多级下拉菜单

支持多种浏览器，体验效果：
http://keleyi.com/keleyi/phtml/jqmenu/4.htm

多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>jquery实现多级下拉菜单-柯乐义</title>
  5 <style>
  6 /* navigation style */
  7 #keleyi-com-nav{  8 height: 39px;
  9 font: 12px Geneva, Arial, Helvetica, sans-serif;
 10 background: #2D2D2D;
 11 border: 1px solid #323232;
 12 border-radius: 3px;
 13 min-width:500px;
 14 margin-left: 0px;
 15 padding-left: 0px;
 16 }
 17
 18 #keleyi-com-nav li{ 19 list-style: none;
 20 display: block;
 21 float: left;
 22 height: 40px;
 23 position: relative;
 24 border-right: 1px solid #323232;
 25 }
 26
 27 #keleyi-com-nav li a{ 28 padding: 0px 10px 0px 30px;
 29 margin: 0px 0;
 30 line-height: 40px;
 31 text-decoration: none;
 32 border-right: 1px solid #636161;
 33 height: 40px;
 34 color: #FFF;
 35 text-shadow: 1px 1px 1px #66696B;
 36 }
 37
 38 #keleyi-com-nav ul{ 39 background: #f2f5f6;
 40 padding: 0px;
 41 border-bottom: 1px solid #DDDDDD;
 42 border-right: 1px solid #DDDDDD;
 43 border-left:1px solid #DDDDDD;
 44 border-radius: 0px 0px 3px 3px;
 45 box-shadow: 2px 2px 3px #ECECEC;
 46 -webkit-box-shadow: 2px 2px 3px #ECECEC;
 47 -moz-box-shadow:2px 2px 3px #ECECEC;
 48 width:170px;
 49 }
 50 #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{ 51 padding-left: 10px;
 52 padding-right: 10px;
 53 color: #FFF;
 54 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px;
 55 width: 160px;
 56 }
 57 #keleyi-com-nav .site-name a{ 58 width: 129px;
 59 overflow:hidden;
 60 }
 61 #keleyi-com-nav li.facebook{ 62 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px;
 63 }
 64 #keleyi-com-nav li.facebook:hover { 65 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101;
 66 }
 67 #keleyi-com-nav li.yahoo{ 68 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px;
 69 }
 70 #keleyi-com-nav li.yahoo:hover { 71 background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101;
 72 }
 73
 74
 75 #keleyi-com-nav li:hover{ 76 background: #010101;
 77 }
 78 #keleyi-com-nav li a{ 79 display: block;
 80 }
 81 #keleyi-com-nav ul li { 82 border-right:none;
 83 border-bottom:1px solid #DDDDDD;
 84 width:170px;
 85 height:39px;
 86 }
 87 #keleyi-com-nav ul li a { 88 border-right: none;
 89 color:#6791AD;
 90 text-shadow: 1px 1px 1px #FFF;
 91 border-bottom:1px solid #FFFFFF;
 92 }
 93 #keleyi-com-nav ul li:hover{background:#DFEEF0;}
 94 #keleyi-com-nav ul li:last-child { border-bottom: none;}
 95 #keleyi-com-nav ul li:last-child a{ border-bottom: none;}
 96 /* Sub menus */
 97 #keleyi-com-nav ul{ 98 display: none;
 99 visibility:hidden;
100 position: absolute;
101 top: 40px;
102 }
103
104 /* Third-level menus */
105 #keleyi-com-nav ul ul{106 top: 0px;
107 left:170px;
108 display: none;
109 visibility:hidden;
110 border: 1px solid #DDDDDD;
111 }
112 /* Fourth-level menus */
113 #keleyi-com-nav ul ul ul{114 top: 0px;
115 left:170px;
116 display: none;
117 visibility:hidden;
118 border: 1px solid #DDDDDD;
119 }
120
121 #keleyi-com-nav ul li{122 display: block;
123 visibility:visible;
124 }
125 #keleyi-com-nav li:hover > ul{126 display: block;
127 visibility:visible;
128 }
129 </style>
130 <!--[if IE 7]>
131 <style>
132 #keleyi-com-nav{
133 margin-left:0px
134 }
135 #keleyi-com-nav ul{
136 left:-40px;
137 }
138 #keleyi-com-nav ul ul{
139 left:130px;
140 }
141 #keleyi-com-nav ul ul ul{
142 left:130px;
143 }
144 </style>
145 <![endif]-->
146 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
147 <script type="text/javascript">
148 $(document).ready(function () {
149 $("#kel"+"eyi-com-nav li").hover(
150 function () {
151 $(this).children('ul').hide();
152 $(this).children('ul').slideDown('fast');
153 },
154 function () {
155 $('ul', this).slideUp('fast');
156 });
157 });
158 </script>
159 </head>
160 <body>
161 <ul id="keleyi-com-nav">
162 <li class="site-name"><a href="http://keleyi.com">&nbsp;</a></li>
163 <li class="yahoo"><a href="http://keleyi.com">导航菜单</a>
164 <ul>
165 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">导航菜单二级分类 &raquo;</a>
166 <ul>
167 <li><a href="http://keleyi.com">1</a></li>
168 <li><a href="http://keleyi.com/a/bjac/r55i6646.htm">2</a></li>
169 <li><a href="http://keleyi.com">3</a></li>
170 <li><a href="http://keleyi.com">导航菜单三 &raquo;</a>
171 <ul>
172 <li><a href="http://keleyi.com">导航菜单4</a></li>
173 <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm">1</a></li>
174 </ul>
175 </li>
176 </ul>
177 </li>
178 <li><a href="http://keleyi.com">1</a></li>
179 <li><a href="http://keleyi.com">2</a></li>
180 </ul>
181 </li>
182 <li class="facebook"><a href="http://keleyi.com">翻页</a>
183 <ul>
184 <li><a href="http://keleyi.com">1</a></li>
185 <li><a href="http://keleyi.com">2</a></li>
186 </ul>
187 </li>
188 </ul>
189 </body>
190 </html>

更多菜单：http://keleyi.com/a/bjac/veugsmw9.htm

Web前端资源汇总：http://www.cnblogs.com/jihua/p/webfront.html

原文：http://keleyi.com/a/bjac/qe60secm.htm

转载于:https://www.cnblogs.com/jihua/p/jquerymenu.html

jquery实现多级下拉菜单相关推荐

基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
iOS 多级下拉菜单
前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下多级下拉菜单二级下拉筛选菜单. ...
qml中使用combobox实现多级菜单_excel实用技巧：如何构建多级下拉菜单
编按:哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的下拉菜单,可能就有点蒙圈了.其实用Excel制作三级下拉菜单,一点都不难,它就跟 ...
如何JQ将下拉列表的值传送给php,JQuery设置获取下拉菜单某个选项的值(比较全)...
JQuery获取和设置Select选项获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
手动制造报错_告别手动录入数据的错误，Excel多级下拉菜单怎么制作？
知识改变命运,科技成就未来.Microsoft Excel数据录入是我们常会遇到的情况,尤其是对于固定数据的录入,每个人的习惯不同,录入的数据也会千差万别,对后期的数据统计造成不便,有什么办法能解决这 ...
excel实用技巧：如何构建多级下拉菜单
使用数据有效性制作下拉菜单对大多数小伙伴来说都不陌生,但说到二级和三级下拉菜单大家可能就不是那么熟悉了. 什么是二级和三级下拉菜单呢?举个例子,在一个单元格选择某个省后,第二个单元格选项只能出现该省份 ...
几张表格怎么联动_如何实现多张excel表格数据联动-Excel 如何实现多级下拉菜单的联动...
Excel 如何实现多级下拉菜单的联动 excel中份表格实现数据同步的步骤如下: 首先打开计算机,在计算机桌面找到excel软件标左键双击excel的快捷方式以打开软件.然后打开需要进行数据同步的表 ...
php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单，jquery - phpStudy
用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...

jquery实现多级下拉菜单

jquery实现多级下拉菜单相关推荐

最新文章

热门文章