JS实现类似腾讯QQ折叠菜单

代码简介：仿QQ动感折叠菜单（JS+css）（二）平缓动画型，也是大家比较熟悉的一种动画形式，菜单层级你可以根据你的实际需要不断扩展下去，演示菜单没有包括链接，相信这个难不倒你吧。

代码内容：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< style type ="text/css" >
body { margin : 10px ; padding : 10px ; }
body,h2,div,span,li { font-size : 12px ; }
.title01,.title02 { color : #fff ; font-weight : bold ; }
#DoorP { border : 12px solid #eee ; width : 150px ; padding : 4px ; background : #fff ; }
h2 { text-align : center ; margin : 0px ; padding : 0px ; line-height : 22px ; }
.title01 { width : 100% ; height : 25px ; background : #00ccff ; cursor : pointer ; }
.title02 { width : 100% ; height : 25px ; background : #99cc00 ; cursor : pointer ; }
.content { background : #eee ; border-bottom : 2px solid #fff ; overflow : hidden ; color : #666 ; padding-left : 4px ; padding-right : 4px ; line-height : 18px ; }
.content a:link,.content a:visited { color : #666666 ; text-decoration : none ; }
.content a:hover { color : #FF6600 ; text-decoration : underline ; }
</ style >
< title > JS实现类似腾讯QQ折叠菜单_网页代码站(www.webdm.cn) </ title >
</ head >
< body >
< div id ="DoorP" >
< h2 > 网页代码站 </ h2 >
< div class ="content" > CodeFans.net < br /> 导航菜单 < br /></ div >
< h2 > 第二层信息 </ h2 >
< div class ="content" >< a href ="http://www.webdm.cn" > 网页特效 </ a >< br />< a href ="http://www.webdm.cn" > 网页代码站 </ a >< br /></ div >
< h2 > 第三层信息 </ h2 >
< div class ="content" > 菜单示例 < br /> 菜单示例 < br /></ div >
< h2 > 第四层信息 </ h2 >
< div class ="content" > 这是第五层 < br /></ div >
< h2 > 第五层信息 </ h2 >
< div class ="content" > 网页代码站 < br /></ div >
< h2 > 第六层信息 </ h2 >
< div class ="content" > 最新更新 < br /> 下载排行 </ div >
</ div >
< script type ="text/javascript" >
var onum = 0 ;
var closeState = new Array();
var ch = 200 ;
function $(id){ if (document.getElementById(id)){ return document.getElementById(id);} else {alert( " 没有找到! " )}}
function $tag(id,tagName){ return $(id).getElementsByTagName(tagName)}
var Ds = $tag( " DoorP " , " div " );
var Ts = $tag( " DoorP " , " h2 " );
if (Ds.length != Ts.length){alert( " 初始化失败! " );}
function showMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); var h2 = parseInt(Ds[Oid].style.height); var dH = ch; if (h > 0 ){h = h - Math.ceil(h / 3);Ds

[Cid].style.height = h + " px " ;}; if (h2 < dH){h2 = h2 + Math.ceil((dH - h2) / 3);Ds[Oid].style.height=h2+"px";};if(h<=0&&h2>=dH){clearTimeout(closeState

[Cid]); return false ;};closeState[Cid] = setTimeout( " showMe( " + Cid + " , " + Oid + " ) " );}
for ( var i = 0 ;i < Ds.length;i ++ ){
if (i == onum){Ds[i].style.height = ch + " px " ;Ts[i].className = " title01 " ;} else {Ds[i].style.height = " 0px " ;Ts[i].className = " title02 " ;}
Ts[i].value = i;
Ts[i].onclick = function (){ if (onum == this .value){ return false ;};
Ts[onum].className = " title02 " ;
Ts[ this .value].className = " title01 " ;
for ( var i = 0 ;i < closeState.length;i ++ ){clearTimeout(closeState[i]);}
showMe(onum, this .value);
onum = this .value;
}
}
</ script >
</ body >
</ html >
< br >
< p >< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ </ p >

代码来自：http://www.webdm.cn/webcode/920bca9f-04bb-4538-8141-015ea78872f4.html

转载于:https://www.cnblogs.com/webdm/archive/2011/02/11/1951136.html