竖向简洁的折叠菜单_网页代码站(www.webdm.cn)

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd" >
2   < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
3 < head >
4 < title > 竖向简洁的折叠菜单_网页代码站(www.webdm.cn) </ title >
5 < style >
6 #outer { width : 504px ; height : 510px ; position : relative ; background : url(http://www.webdm.cn/images/20090910/red_frog.jpg) no-repeat 0px 160px ; }
7 #outer #content { clear : left ; position : absolute ; left : 230px ; top : 10px ; width : 250px ; z-index : 10 ; }
8 #menu { list-style-type : none ; padding : 0 ; margin : 0 ; width : 125px ; position : absolute ; top : 70px ; left : 0 ; border : 1px solid #fff ; border-width : 0 1px
9
10 1px ; z-index : 100 ; }
11 #menu ul { list-style-type : none ; padding : 0 ; margin : 0 ; width : 125px ; }
12 #menu li { float : left ; background : #657 ; position : relative ; border-top : 1px solid #fff ; }
13 #menu li.sub { background : #d30 ; }
14 #menu li, #menu li a { display : block ; color : #fff ; font-family : arial, sans-serif ; font-size : 11px ; line-height : 24px ; width : 125px ; text-
15
16 decoration : none ; cursor : pointer ; font-weight : bold ; text-indent : 5px ; }
17 #menu ul,
18 #menu li.click ul ul,
19 #menu li.click ul li.hover ul ul { display : none ; }
20 #menu li.hover { color : #ff0 ; z-index : 500 ; }
21 #menu li.click { color : #ff0 ; }
22 #menu li.click ul { display : block ; }
23 #menu li.click ul li.hover ul,
24 #menu li.click ul li.hover ul li.hover ul { display : block ; position : absolute ; left : 110px ; top : -1px ; border : 1px solid #fff ; border-width : 0 1px
25
26 1px ; }
27 #menu li.click ul li.fly { background : #657 url(frog_arrow.gif) no-repeat top right ; }
28 #menu li.click ul li.hover { background : #98a ; }
29 #menu li.click ul li.hover ul li { background : #c60 ; }
30 #menu li.click ul li.hover ul li.hover ul li { background : #780 ; z-index : 500 ; }
31 #menu li.click ul li.hover ul li.fly { background : #c60 url(frog_arrow.gif) no-repeat top right ; }
32 #menu li.click ul li.hover ul li.hover { z-index : 500 ; background : #fa4 ; }
33 #menu li.click ul li.hover ul li.hover a { color : #000 ; }
34 #menu li.click ul li.hover ul li.hover ul li.hover { background : #aa0 ; }
35 #menu li.click ul li.hover ul li.hover ul li.hover a { color : #fff ; }
36 #outer img { display : block ; float : right ; }
37 #outer p { margin : 0px ; padding : 17px 0 0 0 ; color : #000 ; font-size : 12px ; font-family : arial, sans-serif ; text-align : justify ; }
38 </ style >
39
40 < script type ="text/javascript" >
41 clickMenu = function (menu) {
42 var getEls = document.getElementById(menu).getElementsByTagName( " LI " );
43 var getAgn = getEls;
44
45 for ( var i = 0 ; i < getEls.length; i ++ ) {
46 getEls[i].onclick = function () {
47 for ( var x = 0 ; x < getAgn.length; x ++ ) {
48 getAgn[x].className = getAgn[x].className.replace( " unclick " , "" );
49 getAgn[x].className = getAgn[x].className.replace( " click " , " unclick " );
50 }
51 if (( this .className.indexOf( ' unclick ' )) !=- 1 ) {
52 this .className = this .className.replace( " unclick " , "" );;
53 }
54 else {
55 this .className += " click " ;
56 }
57 }
58 getEls[i].onmouseover = function () {
59 this .className += " hover " ;
60 }
61 getEls[i].onmouseout = function () {
62 this .className = this .className.replace( " hover " , "" );
63 }
64 }
65 }
66 </ script >
67
68 </ head >
69
70 < body onload ="clickMenu('menu')" >
71 < div id ="outer" >
72 < ul id ="menu" >
73 < li class ="sub" > Types
74 < ul >
75 < li >< a href ="#nogo" > Indian </ a ></ li >
76 < li >< a href ="#nogo" > 韩国 </ a ></ li >
77 < li class ="fly" >< a href ="#nogo" > 美国 </ a >
78 < ul >
79 < li >< a href ="#nogo" > 朝鲜 </ a ></ li >
80 < li class ="fly" >< a href ="#nogo" > 南朝鲜 </ a >
81 < ul >
82 < li >< a href ="#nogo" > 西大街 </ a ></ li >
83 < li >< a href ="#nogo" > 东大街 </ a ></ li >
84 </ ul >
85 </ li >
86 </ ul >
87 </ li >
88 < li >< a href ="#nogo" > 日本语 </ a ></ li >
89 < li >< a href ="#nogo" > 简体中文 </ a ></ li >
90 </ ul >
91 </ li >
92 < li class ="sub" > 地区分布
93 < ul >
94 < li class ="fly" >< a href ="#nogo" > 北京 </ a >
95 < ul >
96 < li >< a href ="#nogo" > Hemiphractus </ a ></ li >
97 < li >< a href ="#nogo" > Stefania </ a ></ li >
98 </ ul >
99 </ li >
100 < li class ="fly" >< a href ="#nogo" > 河南 </ a >
101 < ul >
102 < li >< a href ="#nogo" > Acris </ a ></ li >
103 < li >< a href ="#nogo" > Anotheca </ a ></ li >
104 < li >< a href ="#nogo" > Trachycephalus </ a ></ li >
105 </ ul >
106 </ li >
107 < li class ="fly" >< a href ="#nogo9" > 武汉 </ a >
108 < ul >
109 < li >< a href ="#nogo" > Boophis </ a ></ li >
110 < li >< a href ="#nogo" > Callixalus </ a ></ li >
111 < li >< a href ="#nogo" > Chiromantis </ a ></ li >
112 </ ul >
113 </ li >
114 </ ul >
115 </ li >
116 < li class ="sub" > References
117 < ul >
118 < li >< a href ="/" > Wikipedia </ a ></ li >
119 < li >< a href ="#nogo11" > Encyclopedia </ a ></ li >
120 </ ul >
121 </ li >
122 < li class ="sub" > 链接
123 < ul >
124 < li >< a href ="#nogo" > 网页代码站 </ a ></ li >
125 < li >< a href ="#nogo" > 百度搜索 </ a ></ li >
126 </ ul >
127 </ li >
128 </ ul >
129 </ div >
130 </ body >
131 </ html >
132 < br >
133 < a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/df1d1ce3-0de4-47af-a48a-e6a62900ecee.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/01/01/1923668.html