仿QQ折叠菜单动感效果（JS+css）

2024-09-05 12:20:02

字体：大中小

来源：转载

供稿：网友

仿QQ下拉折叠菜单（动画版），多种颜色的完美搭配，和以前QQ版本的说菜单形式有点像，不但看上去很漂亮，而且菜单也很动感，类似jQuery打造的效果，不过这里是纯JavaScript技术实现，很不错哦。

<!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><title>仿QQ下拉折叠菜单（带弹性）</title><style type="text/css">body{margin:10px;padding:10px;}body,td,div,span,li{font-size:9pt;}.title01,.title02{color:#fff;font-weight:bold;}#DoorP{border:12px solid #eee;width:150px;height:300px;padding:4px;background:#fff;}.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:8px;line-height:18px;}</style></head><body><div id="DoorP"><table>  <tr>   <td>源码分类</td>  </tr></table><div class="content">欢迎您！</div><table>  <tr>   <td>网页特效</td>  </tr></table><div class="content">  编程乐园</div><table>  <tr><td>代码下载</td>  </tr></table><div class="content">  QQ菜单</div></div><script type="text/javascript">var open = 2;// 设置初始打开的层序号var openState = new Array();var closeState = new Array();var dH = 220;function $(id){  if(document.getElementById(id))  {   return document.getElementById(id);  }  else  {   alert("没有找到!");  }}function $tag(id,tagName){  return $(id).getElementsByTagName(tagName)}function closeMe(Cid,Oid){      var h = parseInt(Ds[Cid].style.height);  //alert(h);  if(h > 0)  {   h = h - Math.ceil(h/3);       Ds[Cid].style.height = h+"px";  }  else  {       openMe(Oid);   clearTimeout(closeState[Cid]);   return false;  }  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");}function openMe(Oid){  var h = parseInt(Ds[Oid].style.height);      if(h < dH)  {   h = h + Math.ceil((dH-h)/3);       Ds[Oid].style.height = h+"px";  }  else  {     clearTimeout(openState[Oid]);      return false;  }  openState[Oid] = setTimeout("openMe("+Oid+")");}var Ds = $tag("DoorP","div");var Ts = $tag("DoorP","table");if(Ds.length != Ts.length){  alert("标题和内容数目不相同!");}for(var i = 0 ; i < Ds.length ; i++){    if(i==open)  {   Ds[i].style.height = dH+"px";   Ts[i].className="title01";  }  else  {   Ds[i].style.height = "0px";   Ts[i].className="title02";  }  Ts[i].value = i;  Ts[i].onclick = function(){   if(open==this.value)   {    return false;   }   Ts[open].className="title02";   Ts[this.value].className="title01";   for(var i = 0 ; i < openState.length ; i++)   {    clearTimeout(openState[i]);    clearTimeout(closeState[i]);   }   closeMe(open,this.value);   //openMe(this.value);   open = this.value;  }} //无动画打开层函数function showDiv(id){    Ds[id].style.height=dH+"px";  Ds[open].style.height="0px";  open = id;}//动画打开层函数</script></body></html>

上一篇：DIV+js后台左侧专用菜单

下一篇：仿QQ折叠菜单平滑型（JS+css）