QQ菜單可折疊，JS+CSS很漂亮_菜單導(dǎo)航特效

又一個(gè)漂亮的仿QQ折疊菜單，JS+CSS技術(shù)聯(lián)合打造，菜單風(fēng)格采用熱色系，給人很舒服的感覺(jué)。除了基本的展開(kāi)/折疊功能，它還可以定義漸漸展/折疊，也就是帶有動(dòng)畫(huà)效果，部分布局使用了Table，因此對(duì)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;
}
.mrc{
 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="mrc">
  人見(jiàn)人愛(ài)<br/>
  路在何方<br/>
  十三娘<br/>
 </div>
 <table>
  <tr>
   <td>最近聯(lián)系人</td>
  </tr>
 </table>
 <div class="mrc">
  ThirdteenDevil
 </div>
 <table>
  <tr>
   <td>陌生人</td>
  </tr>
 </table>
 <div class="mrc">
  devil13th
 </div>
</div>
<script type="text/javascript">
 var open = 2;// 設(shè)置初始層序號(hào)
 var openState = new Array();
 var closeState = new Array();
 var dH = 220;
 function $(id){
  if(document.getElementById(id))
  {
   return document.getElementById(id);
  }
  else
  {
   alert("沒(méi)有找到!");
  }
 }
 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("標(biāo)題和內(nèi)容數(shù)目不相同!");
 }
 
 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;
  }
 } 
 //直接打開(kāi)層
 function showDiv(id){  
  Ds[id].style.height=dH+"px";
  Ds[open].style.height="0px";
  open = id;
 }
 //動(dòng)畫(huà)打開(kāi)層
</script>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索QQ菜單可折疊，JS+CSS很漂亮
特效說(shuō)明：
菜單導(dǎo)航模板-QQ菜單可折疊，JS+CSS很漂亮。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

QQ菜單可折疊，JS+CSS很漂亮_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

QQ菜單可折疊，JS+CSS很漂亮_菜單導(dǎo)航特效