jquery左侧导航网页菜单

长平狐 发布于 2012/09/06 16:48
阅读 1K+
收藏 0

公司项目需要写一个左侧导航菜单,在网上找了好多源码参考,处理的都很复杂,移植性不是很好,最后根据一个比较不错的修改了一下达到了想要的效果。

前端HTML代码:

View Code
1 < html xmlns ="http://www.w3.org/1999/xhtml" >
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
4 < title >jquery左侧导航网页菜单 </ title >
5 < link rel ="stylesheet" type ="text/css" href ="css/css.css" />
6 < script type ="text/javascript" src ="js/jquery.min.js" ></ script >
7 < script type ="text/javascript" >
8 $(document).ready( function () {
9 $( ' li.button a ' ).click( function (e) {
10 var dropDown = $( this ).parent().next();
11 $( ' .dropdown ' ).not(dropDown).slideUp( ' slow ' );
12 dropDown.slideToggle( ' slow ' );
13 e.ventDefault();
14 })
15
16 });
17 </ script >
18 </ head >
19 < body style ="text-align: center" >
20 < div id ="main" >
21 < ul class ="" >
22 < li class ="menu" >
23 < ul >
24 < li class ="button" >< a href ="#" class ="green" >菜单一 < span ></ span ></ a ></ li >
25 < li class ="dropdown" >
26 < ul >
27 < li >< a href ="#" >链接一 </ a ></ li >
28 < li >< a href ="#" >链接二 </ a ></ li >
29 < li >< a href ="#" >链接三 </ a ></ li >
30 < li >< a href ="#" >链接四 </ a ></ li >
31 </ ul >
32 </ li >
33 </ ul >
34 </ li >
35 < li class ="menu" >
36 < ul >
37 < li class ="button" >< a href ="#" class ="orange" >菜单二 < span ></ span ></ a ></ li >
38 < li class ="dropdown" >
39 < ul >
40 < li >< a href ="#" >链接一 </ a ></ li >
41 < li >< a href ="#" >链接二 </ a ></ li >
42 < li >< a href ="#" >链接三 </ a ></ li >
43 </ ul >
44 </ li >
45 </ ul >
46 </ li >
47 < li class ="menu" >
48 < ul >
49 < li class ="button" >< a href ="#" class ="blue" >菜单三 < span ></ span ></ a ></ li >
50 < li class ="dropdown" >
51 < ul >
52 < li >< a href ="#" >链接一 </ a ></ li >
53 < li >< a href ="#" >链接二 </ a ></ li >
54 < li >< a href ="#" >链接三 </ a ></ li >
55 < li >< a href ="#" >链接四 </ a ></ li >
56 </ ul >
57 </ li >
58 </ ul >
59 </ li >
60 </ ul >
61 < div class ="clear" >
62 </ div >
63 </ div >
64 </ body >
65 </ html >

最后展示下我实现的效果:

源代码:Jquery实现竖导航网页菜单


原文链接:http://www.cnblogs.com/weisenz/archive/2012/03/28/2420844.html
加载中
返回顶部
顶部