QQ菜单可折叠，JS+CSS很漂亮

2024-09-05 12:19:29

字体：大中小

来源：转载

供稿：网友

又一个漂亮的仿QQ折叠菜单，JS+CSS技术联合打造，菜单风格采用暖色系，给人很舒服的感觉。除了基本的展开/折叠功能，它还可以定义渐渐展/折叠，也就是带有动画效果，部分布局使用了Table，因此对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><title>QQ菜单</title><style type="text/css">body{ margin:10px; padding:10px;}body,td,div,span,li{ font-size:12px;}.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:4px; padding-right:4px; line-height:18px;}</style></head><body><div id="DoorP"> <table>  <tr>   <td>我的好友</td>  </tr> </table> <div class="content">  人见人爱<br/>  路在何方<br/> </div> <table>  <tr>   <td>最近联系人</td>  </tr> </table> <div class="content">  武松 </div> <table>  <tr>   <td>陌生人</td>  </tr> </table> <div class="content">  云烟 </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);    //alert(h);  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>

上一篇：半透明蓝色调水平下拉导航条，很漂亮

下一篇：爆炸式菜单，点击后展开