仿QQ折叠菜单动感效果(JS+css)_菜单导航特效

仿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下拉折叠菜单（带弹性）- www.mb5u.com </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>网页殊效</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;// 设置初始打开的层序号

所属频道：菜单导航特效/更新时间：2012-11-03

[收藏][报错][返回列表]

仿QQ折叠菜单动感效果(JS+css)_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些