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   class="v1n9dtt"   id="DoorP"> <table>  <tr>   <td>我的好友</td>  </tr> </table> <div   id="j5npx9v"   class="content">  人見人愛<br/>  路在何方<br/> </div> <table>  <tr>   <td>最近聯系人</td>  </tr> </table> <div   id="bdfffdd"   class="content">  武松 </div> <table>  <tr>   <td>陌生人</td>  </tr> </table> <div   id="bldvfdv"   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>

上一篇：半透明藍色調水平下拉導航條，很漂亮

下一篇：爆炸式菜單，點擊后展開