網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

仿QQ折疊菜單動感效果(JS+css)_菜單導(dǎo)航特效

仿QQ下拉折疊菜單（動畫版），多種顏色的完美搭配，和以前QQ版本的說菜單形式有點像，不但看上往很漂亮，而且菜單也很動感，類似jQuery打造的效果，不過這里是純JavaScript技術(shù)實現(xiàn)，很不錯哦。

<!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下拉折疊菜單（帶彈性）- www.zhaotila.cn </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;
}
.mrc{
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="mrc">這里歡迎您！</div>
<table>
  <tr>
   <td>網(wǎng)頁殊效</td>
  </tr>
</table>
<div class="mrc">
  模板無憂
</div>
<table>
  <tr><td>源碼下載</td>
  </tr>
</table>
<div class="mrc">
  QQ菜單
</div>
</div>
<script type="text/javascript">
var open = 2;// 設(shè)置初始打開的層序號

所屬頻道：菜單導(dǎo)航特效/更新時間：2012-11-03

[收藏][報錯][返回列表]

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

仿QQ折疊菜單動感效果(JS+css)_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些