用JavaScript实现横向滑出的多级竖向菜单_网页代码站(www.webdm.cn)

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 > 用JavaScript实现横向滑出的多级竖向菜单_网页代码站(www.webdm.cn) </ title >
5 < style >
6 * { padding : 0 ; margin : 0 }
7 body { font : 12px Verdana, Arial, Helvetica }
8 #wrapper { width : 750px ; padding : 25px ; margin : 0 auto }
9 #leftcolumn { float : left ; width : 225px }
10 #rightcolumn { float : left ; width : 525px }
11 .dropdown { display : block ; position : relative }
12 .dropdown dt { width : 188px ; border : 2px solid #9ac1c9 ; padding : 8px ; font-weight : bold ; cursor : pointer ; background : url
13
14 (http://www.webdm.cn/images/20090910/header.gif) }
15 .dropdown .upperdd { border-bottom : none }
16 .dropdown dt:hover { background : url(http://www.webdm.cn/images/20090910/header_over.gif) }
17 .dropdown dd { position : absolute ; top : 0 ; overflow : hidden ; width : 208px ; display : none ; background : #fff ; opacity : 0 }
18 .dropdown ul { width : 204px ; border : 2px solid #9ac1c9 ; list-style : none }
19 .dropdown li { display : inline }
20 .dropdown a, .dropdown a:active, .dropdown a:visited { display : block ; padding : 5px ; color : #333 ; text-decoration : none ; background : #eaf0f2 ;
21
22 width : 194px }
23 .dropdown a:hover { background : #d9e1e4 ; color : #000 }
24 .dropdown .underline { border-bottom : 1px solid #b9d6dc }
25 </ style >
26 < script type ="text/javascript" >
27 var DDSPEED = 10 ;
28 var DDTIMER = 15 ;
29 var OFFSET = - 2 ;
30 var ZINT = 100 ;
31
32 function ddMenu(id,d){
33 var h = document.getElementById(id + ' -ddheader ' );
34 var c = document.getElementById(id + ' -ddcontent ' );
35 clearInterval(c.timer);
36 if (d == 1 ){
37 clearTimeout(h.timer);
38 c.style.display = ' block ' ;
39 if (c.maxh && c.maxh <= c.offsetHeight){ return }
40 else if ( ! c.maxh){
41 c.style.left = (h.offsetWidth + OFFSET) + ' px ' ;
42 c.style.height = ' auto ' ;
43 c.maxh = c.offsetHeight;
44 c.style.height = ' 0px ' ;
45 }
46 ZINT = ZINT + 1 ;
47 c.style.zIndex = ZINT;
48 c.timer = setInterval( function (){ddSlide(c, 1 )},DDTIMER);
49 } else {
50 h.timer = setTimeout( function (){ddCollapse(c)}, 50 );
51 }
52 }
53
54 function ddCollapse(c){
55 c.timer = setInterval( function (){ddSlide(c, - 1 )},DDTIMER);
56 }
57
58 function cancelHide(id){
59 var h = document.getElementById(id + ' -ddheader ' );
60 var c = document.getElementById(id + ' -ddcontent ' );
61 clearTimeout(h.timer);
62 clearInterval(c.timer);
63 if (c.offsetHeight < c.maxh){
64 c.timer = setInterval( function (){ddSlide(c, 1 )},DDTIMER);
65 }
66 }
67
68 function ddSlide(c,d){
69 var currh = c.offsetHeight;
70 var dist;
71 if (d == 1 ){
72 dist = Math.round((c.maxh - currh) / DDSPEED);
73 } else {
74 dist = Math.round(currh / DDSPEED);
75 }
76 if (dist <= 1 && d == 1 ){
77 dist = 1 ;
78 }
79 c.style.height = currh + (dist * d) + ' px ' ;
80 c.style.opacity = currh / c.maxh;
81 c.style.filter = ' alpha(opacity= ' + (currh * 100 / c.maxh) + ' ) ' ;
82 if (currh > (c.maxh - 2 ) && d == 1 ){
83 clearInterval(c.timer);
84 } else if (dist < 1 && d != 1 ){
85 clearInterval(c.timer);
86 c.style.display = ' none ' ;
87 }
88 }
89 </ script >
90 </ head >
91 < body >
92 < div id ="wrapper" >
93 < div id ="leftcolumn" >
94 < dl class ="dropdown" >
95 < dt id ="one-ddheader" class ="upperdd" onmouseover ="ddMenu('one',1)" onmouseout ="ddMenu('one',-1)" > 我们首页 </ dt >
96 < dd id ="one-ddcontent" onmouseover ="cancelHide('one')" onmouseout ="ddMenu('one',-1)" >
97 < ul >
98 < li >< a href ="/" class ="underline" > 网页代码站 </ a ></ li >
99 < li >< a href ="#" class ="underline" > 网页特效 </ a ></ li >
100 < li >< a href ="http://www.webdm.cn" > 源码下载 </ a ></ li >
101 </ ul >
102 </ dd >
103 </ dl >
104 < dl class ="dropdown" >
105 < dt id ="two-ddheader" class ="upperdd" onmouseover ="ddMenu('two',1)" onmouseout ="ddMenu('two',-1)" > 网站导航 </ dt >
106 < dd id ="two-ddcontent" onmouseover ="cancelHide('two')" onmouseout ="ddMenu('two',-1)" >
107 < ul >
108 < li >< a href ="http://www.webdm.cn" class ="underline" > ASP </ a ></ li >
109 < li >< a href ="#" class ="underline" > PHP </ a ></ li >
110 < li >< a href ="http://www.webdm.cn" class ="underline" > .NET </ a ></ li >
111 < li >< a href ="http://www.webdm.cn" > 网站留言 </ a ></ li >
112 </ ul >
113 </ dd >
114 </ dl >
115 < dl class ="dropdown" >
116 < dt id ="three-ddheader" class ="upperdd" > 最新下载 </ dt >
117 </ dl >
118 < dl class ="dropdown" >
119 < dt id ="four-ddheader" onmouseover ="ddMenu('four',1)" onmouseout ="ddMenu('four',-1)" > 欢迎再来 </ dt >
120 < dd id ="four-ddcontent" onmouseover ="cancelHide('four')" onmouseout ="ddMenu('four',-1)" >
121 < ul >
122 < li >< a href ="#" class ="underline" > 欢迎再来WebDm.net </ a ></ li >
123 < li >< a href ="#" > 慢走，不送 </ a ></ li >
124 </ ul >
125 </ dd >
126 </ dl >
127 </ div >
128 </ div >
129 </ body >
130 </ html >
131 < br >
132 < a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/91bfc676-9685-4b90-b6f3-f6c9b8d39f23.html

转载于:https://www.cnblogs.com/webdm/archive/2010/12/30/1921537.html