简单的二级菜单导航
来源：互联网 发布：网页怎么调用php 编辑：程序博客网 时间：2024/04/30 23:13
这种效果在b2c商城经常用的到，刚结束的项目就用到了，简单分享下。
Demo：http://www.ostools.net/jsbin/uiafeaei/1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>无标题文档</title><styletype="text/css">ul{margin:0;padding:0;list-style-type:none;}a{ text-decoration:none;}.mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}.mold_open{background-position:0 -6px;}.mold_open_hover{background-position:0 0;}.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}h1{margin-left:100px;}.menu-cont-list a:hover{text-decoration:underline;}.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}.mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}.mod-menu .menu-item a:hover{ text-decoration:none;}.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}.mod-menu .menu-cont-list{padding:0 30px;}.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}.mod-menu .menu-cont-list li:last-child{border-bottom:none;}.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}.mod-menu .menu-cont-list h3 a{color:#222;}.mod-menu .menu-list-link a{color:#666;line-height:24px;}.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}</style><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script><scripttype="text/javascript"> $(document).ready(function(){ var mod_menu=$(".mod-menu");//导航模块区 var menu=function(){ var menuItem=$(".menu-item li");//选择导航列表 menuItem.each(function(){ var _index=$(this).index();//获取当前选择菜单列表的索引 $(this).mouseenter(function(){ var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标 $(".menu-cont").show(); $(".menu-cont").css("top",y);//需要显示的对应索引内容 $(this).addClass("mouse-bg").siblings().removeClass("mouse-bg"); $(".menu-cont>div").eq(_index).show().siblings().hide(); }); });/*导航菜单菜单*/ $(".mod-menu").mouseleave(function(){ $(".menu-cont").hide(); menuItem.removeClass("mouse-bg"); }) }//展开二级菜单 menu();//执行展开二级菜单函 });</script></head> <body> <h1>简单的2级菜单导航</h1> <divclass="mod-menu f-l"> <divid="column-left"> <ulclass="menu-item"> <liclass=""><ahref="trade-wedding.html">Wedding</a></li> <liclass=""><ahref="trade-occasion-dresses.html">Occasion Dresses</a></li> <liclass=""><ahref="trade-women-s-clothing.html">Women's Clothing</a></li> <liclass=""><ahref="trade-women-s-shoes.html">Women's Shoes</a></li> <liclass=""><ahref="trade-accessories.html">Accessories</a></li> <liclass=""><ahref="trade-beauty-health.html">Beauty & Health</a></li> </ul><!--一级菜单列表--> <divclass="menu-cont hide"style="display: none; top: 241px;"> <divclass="menu-cont-list"style="display: none;"> <ul> <li> <h3><ahref="wedding-dresses-c1_2.html">Wedding Dresses</a></h3> <divclass="menu-list-link"></div> </li> <li> <h3><ahref="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3> <divclass="menu-list-link"></div> </li> <li> <h3><ahref="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3> <divclass="menu-list-link"> <atitle=""href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a> <spanclass="long-string">|</span> <atitle=""href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a> <spanclass="long-string">|</span> <atitle=""href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a> </div> </li> <li> <h3><ahref="wedding-accessories-c1_6.html">Wedding Accessories</a></h3> <divclass="menu-list-link"> <atitle=""href="fabric-swatch-c1_6_100.html">Fabric Swatch</a> <spanclass="long-string">|</span> <atitle=""href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a> <spanclass="long-string">|</span> <atitle=""href="wedding-veils-c1_6_48.html">Wedding Veils</a> <spanclass="long-string">|</span> <atitle=""href="wedding-gloves-c1_6_51.html">Wedding Gloves</a> <spanclass="long-string">|</span> <atitle=""href="wedding-shawls-c1_6_47.html">Wedding Shawls</a> <spanclass="long-string">|</span> <atitle=""href="wedding-flowers-c1_6_52.html">Wedding Flowers</a> <spanclass="long-string">|</span> <atitle=""href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a> </div> </li> </ul> </div> <divclass="menu-cont-list"style="display: none;"> <ul> <li> <h3><ahref="prom-dresses-c103_39.html">Prom Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="evening-dresses-c103_40.html">Evening Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="ball-gowns-c103_43.html">Ball Gowns</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="little-black-dresses-c103_45.html">Little Black Dresses </a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3> <divclass="menu-list-link"> </div> </li> </ul> </div> <divclass="menu-cont-list"style="display: none;"> <ul> <li> <h3><ahref="dresses-c7_8.html">Dresses</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="clubwear-c7_9.html">Clubwear</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="leggings-c7_12.html">Leggings</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="lingeries-c7_13.html">Lingeries</a></h3> <divclass="menu-list-link"> <atitle=""href="bras-c7_13_54.html">Bras</a> <spanclass="long-string">|</span> <atitle=""href="babydolls-c7_13_56.html">Babydolls</a> <spanclass="long-string">|</span> <atitle=""href="teddies-c7_13_57.html">Teddies</a> <spanclass="long-string">|</span> <atitle=""href="panties-c7_13_58.html">Panties</a> <spanclass="long-string">|</span> <atitle=""href="hosiery-c7_13_59.html">Hosiery</a> </div> </li> <li> <h3><ahref="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="costumes-c7_53.html">Costumes</a></h3> <divclass="menu-list-link"> <atitle=""href="sexy-costumes-c7_53_110.html">Sexy Costumes</a> <spanclass="long-string">|</span> <atitle=""href="christmas-costumes-c7_53_119.html">Christmas Costumes</a> <spanclass="long-string">|</span> <atitle=""href="halloween-costumes-c7_53_111.html">Halloween Costumes</a> <spanclass="long-string">|</span> <atitle=""href="halloween-accessories-c7_53_112.html">Halloween Accessories</a> <spanclass="long-string">|</span> <atitle=""href="zentai-c7_53_121.html">Zentai</a> </div> </li> <li> <h3><ahref="swimwear-c7_11.html">Swimwear</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="activewear-c7_10.html">Activewear</a></h3> <divclass="menu-list-link"> </div> </li> </ul> </div> <divclass="menu-cont-list"style="display: none;"> <ul> <li> <h3><ahref="heels-c116_60.html">Heels</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="pumps-c116_117.html">Pumps</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="dance-shoes-c116_62.html">Dance Shoes</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="boots-c116_63.html">Boots</a></h3> <divclass="menu-list-link"> </div> </li> </ul> </div> <divclass="menu-cont-list"style="display: none;"> <ul> <li> <h3><ahref="evening-bags-c15_113.html">Evening Bags</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="hats-scarves-c15_16.html">Hats & Scarves</a></h3> <divclass="menu-list-link"> <atitle=""href="womens-hats-c15_16_64.html">Womens Hats</a> <spanclass="long-string">|</span> <atitle=""href="womens-scarves-c15_16_65.html">Womens Scarves</a> </div> </li> <li> <h3><ahref="jewelry-c15_17.html">Jewelry</a></h3> <divclass="menu-list-link"> <atitle=""href="earrings-c15_17_66.html">Earrings</a> <spanclass="long-string">|</span> <atitle=""href="necklaces-c15_17_67.html">Necklaces</a> <spanclass="long-string">|</span> <atitle=""href="rings-c15_17_68.html">Rings</a> </div> </li> <li> <h3><ahref="watches-c15_18.html">Watches</a></h3> <divclass="menu-list-link"> </div> </li> </ul> </div> <divclass="menu-cont-list"style="display: block;"> <ul> <li> <h3><ahref="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="fascinators-c19_69.html">Fascinators</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="makeup-tools-c19_21.html">Makeup Tools</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="spas-massagers-c19_71.html">Spas & Massagers</a></h3> <divclass="menu-list-link"> </div> </li> <li> <h3><ahref="health-fitness-c19_70.html">Health & Fitness</a></h3> <divclass="menu-list-link"> </div> </li> </ul> </div> </div> </div><!--二级菜单内容--> </div></body></html>- 简单的二级菜单导航
- 简单的二级导航菜单(可折叠)
- 简单的jquery导航二级菜单展示功能
- 简单的二级菜单
- 简单三部实现导航分类二级菜单
- 一个很好的二级导航菜单
- DedeCMS二级导航菜单的实现
- HTML如何实现 导航的二级菜单
- 简单的二级联动菜单
- 简单的二级联动菜单
- 一个简单的二级菜单
- 横向导航二级菜单
- WordPress 二级导航菜单
- 二级导航菜单
- css 导航二级菜单
- 二级下拉菜单导航
- 一个简单的 li/ul/li结构的二级导航菜单
- 经典的导航二级式导航菜单增强版
- DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
- 猎聘网Lietou简历刷新助手
- 幸运儿
- 10个非常不错的CSS技巧
- uva 437 - The Tower of Babylon
- 简单的二级菜单导航
- 智联招聘简历刷新助手
- STS (eclipse) run on server with Tomcat hangs at "Initializing Spring root WebApplicationContext"
- 实用的 CSS3 参考手册和代码生成工具
- 10 个很棒的 CSS3 按钮制作教程和例子
- 数据库设计 Step by Step (1)——扬帆启航
- 数据库设计 Step by Step (2)——数据库生命周期
- 网页设计师的11个好帮手
- 设计模式之七：命令模式（Command Pattern）
