类似京东和易迅的菜单-可以折叠隐藏的导航菜单

很流行的菜单，很多购物网站在使用，包括京东，新蛋中国，易迅都是类似的

演示地址可以存源码

1. <div id="mallNav">
2. <div class="mallNav-con">
3. <div id="mallTextNav" class="clearfix">
4. <div id="mallCate">
5. <div class="tsCategory">
6. <h2 class="mcate-hd"><a href="sitemap.asp#product">所有分类</a><i></i></h2>
7. <div class="catemain" style="display: none;">
8. <div class="tsCategory-con">
9. <div class="mallCategory">
10. <div class="entity">
11. <ul class="items">
13. <li class="item ">
14. <h3><a href="#F1">电子.电器</a><s class="menuIcon"></s></h3>
15. <p class="item-col">
16. <a href="">电器礼品</a>
18. <a href="#32">电子礼品</a>
22. </p>
24. <div class="pop-subcategory" style="display: none;">
25. <div class="shadow">
26. <div class="module">
27. <div class="entity-main J_SubViewItem">
29. <div class="lst-subcategory">
32. <dl><dt><a href="#32">电子礼品</a></dt>
33. <dd>
34. <a href="#32160" >数码相机</a>
36. <a href="#32161" >平板电脑</a>
39. </dd>
41. </dl>
46. <dl><dt><a href="#21">电器礼品</a></dt>
47. <dd>
48. <a href="#21118" >加湿器</a>
50. <a href="#21119" >电热水壶</a>
55. </dd>
57. </dl>
63. </div>
65. </div>
66. </div>
67. </div>
68. </div>
70. </li>
72. <li class="item ">
73. <h3><a href="#F2">家居.玩具</a><s class="menuIcon"></s></h3>
74. <p class="item-col">
75. <a href="#22">家居礼品</a>
77. <a href="#28">毛绒玩具</a>
81. </p>
83. <div class="pop-subcategory" style="display: none;">
84. <div class="shadow">
85. <div class="module">
86. <div class="entity-main J_SubViewItem">
88. <div class="lst-subcategory">
91. <dl><dt><a href="#22">家居礼品</a></dt>
92. <dd>
93. <a href="#2277" >创意厨房</a>
95. <a href="#22157" >收纳凳</a>
97. <a href="#22163" >抱枕被</a>
99. <a href="#22164" >绒金蛇</a>
102. </dd>
104. </dl>
109. <dl><dt><a href="#28">毛绒玩具</a></dt>
110. <dd>
111. <a href="#2893" >美人兔</a>
113. <a href="#2894" >毛绒玩具</a>
115. <a href="#28117" >抱抱熊</a>
118. </dd>
120. </dl>
126. </div>
128. </div>
129. </div>
130. </div>
131. </div>
133. </li>
135. <li class="item ">
136. <h3><a href="#F3">广告.创意.庆典</a><s class="menuIcon"></s></h3>
137. <p class="item-col">
138. <a href="#25">创意礼品</a>
140. <a href="#27">广告礼品</a>
142. <a href="#31">庆典礼品</a>
146. </p>
148. <div class="pop-subcategory" style="display: none;">
149. <div class="shadow">
150. <div class="module">
151. <div class="entity-main J_SubViewItem">
153. <div class="lst-subcategory">
156. <dl><dt><a href="#27">广告礼品</a></dt>
157. <dd>
158. <a href="#2729" >广告气球</a>
161. <a href="#2762" >广告餐具</a>
163. <a href="#2763" >广告烟缸</a>
165. <a href="#2764" >广告沙滩椅</a>
167. <a href="#2765" >广告购物袋</a>
169. <a href="#2766" >广告纸巾</a>
173. </dd>
175. </dl>
180. <dl><dt><a href="#25">创意礼品</a></dt>
181. <dd>
182. <a href="#2576" >巧妙收纳</a>
184. <a href="#2596" >储蓄罐</a>
187. </dd>
189. </dl>
194. <dl><dt><a href="#31">庆典礼品</a></dt>
195. <dd>
196. <a href="#3185" >秀场道具</a>
198. <a href="#3186" >婚庆用品</a>
201. </dd>
203. </dl>
209. </div>
211. </div>
212. </div>
213. </div>
214. </div>
216. </li>
218. <li class="item ">
219. <h3><a href="#F4">健身.户外</a><s class="menuIcon"></s></h3>
220. <p class="item-col">
221. <a href="#23">健身按摩</a>
223. <a href="#24">户外礼品</a>
227. </p>
229. <div class="pop-subcategory" style="display: none;">
230. <div class="shadow">
231. <div class="module">
232. <div class="entity-main J_SubViewItem">
234. <div class="lst-subcategory">
237. <dl><dt><a href="#23">健身按摩</a></dt>
238. <dd>
239. <a href="#2397" >健身用品</a>
241. <a href="#2398" >按摩用品</a>
246. </dd>
248. </dl>
253. <dl><dt><a href="#24">户外礼品</a></dt>
254. <dd>
255. <a href="#24101" >野营用品</a>
257. <a href="#24102" >休闲用品</a>
261. </dd>
263. </dl>
269. </div>
271. </div>
272. </div>
273. </div>
274. </div>
276. </li>
278. <li class="item ">
279. <h3><a href="#F5">办公.汽车</a><s class="menuIcon"></s></h3>
280. <p class="item-col">
281. <a href="#29">汽车礼品</a>
283. <a href="#30">办公礼品</a>
287. </p>
289. <div class="pop-subcategory" style="display: none;">
290. <div class="shadow">
291. <div class="module">
292. <div class="entity-main J_SubViewItem">
294. <div class="lst-subcategory">
297. <dl><dt><a href="#30">办公礼品</a></dt>
298. <dd>
299. <a href="#30104" >电脑周边</a>
301. <a href="#30105" >计算器</a>
303. <a href="#30106" >笔筒</a>
305. <a href="#30107" >办公用品</a>
308. </dd>
310. </dl>
315. <dl><dt><a href="#29">汽车礼品</a></dt>
316. <dd>
317. <a href="#2991" >电子类</a>
319. <a href="#2992" >实用类</a>
322. </dd>
324. </dl>
330. </div>
332. </div>
333. </div>
334. </div>
335. </div>
337. </li>
339. <li class="item ">
340. <h3><a href="#F6">陶瓷</a><s class="menuIcon"></s></h3>
341. <p class="item-col">
342. <a href="#26">陶瓷礼品</a>
346. </p>
348. <div class="pop-subcategory" style="display: none;">
349. <div class="shadow">
350. <div class="module">
351. <div class="entity-main J_SubViewItem">
353. <div class="lst-subcategory">
356. <dl><dt><a href="#26">陶瓷礼品</a></dt>
357. <dd>
358. <a href="#2683" >茶具礼盒</a>
360. <a href="" >瓷器摆件</a>
364. </dd>
366. </dl>
372. </div>
374. </div>
375. </div>
376. </div>
377. </div>
379. </li>
381. </ul>
382. </div>
383. </div>
385. </div>
388. </div>
389. </div>
392. <script type="text/javascript" src="menu/qfgoodscat.js"></script>
393. </div>
394. <div class="mallNav-main">
395. <ul class="MenuList MenuList_943 clearfix">
396. <li class=""><a href="">首页</a></li>
397. <li class=""><a href="">特价礼品</a></li>
398. <li class=""><a href="">品牌专区</a></li>
399. <li class=""><a href="">会员中心</a></li>
400. </ul>
401. </div>
403. </div>
404. </div>
405. </div>
406. <script>
407. var mDm3 = $E('.tsCategory');
408. if (!mDm3.hasClass('hover')){
409. var mFloat = $E('.tsCategory .catemain');
410. mDm3.addEvents({
411. 'mouseenter': function () {
412. this.addClass('hover');
413. mFloat.setStyle('display', 'block');
414. },
415. 'mouseleave': function () {
416. this.removeClass('hover');
417. mFloat.setStyle('display','none');
418. }
419. })
420. }
421. </script>

原文地址:http://www.freejs.net/article_daohangcaidan_67.html