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