地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 菜单导航特效 > 正文:Css+JS仿腾讯QQ竖直滑动的折叠菜单

Css+JS仿腾讯QQ竖直滑动的折叠菜单

日期:2011-12-21 8:44:00 标签:css js特效 折叠菜单 菜单特效 qq菜单 javascript

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
<html>
<head>
<title>Css+JS仿腾讯QQ竖直滑动的折叠菜单丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.sv3 dl,.sv3 dt,.sv3 dd{
 padding:0;
 margin:0;
}
.sv3{
 width:240px;
 border:1px solid #BFC7D9;
}
.sv3 dl{
 width:240px;
 height:380px;
 background:#EDF5FF;
 overflow:hidden;
}
.sv3 dt{
 padding:5px 10px;
 height:13px;
 font-size:13px;
 color:#000;
 background:#E5ECF9;
 border-top:1px solid #fff;
 border-bottom:1px solid #BFC7D9;
}
.sv3 dl.on dt{
 background:#3366CC;
 color:#FFF;
 font-weight:bold;
}
.sv3 dd{
 padding:10px;
 color:#333;
 font-size:12px;
 line-height:1.5em;
}
.sv3 dd a:link,
.sv3 dd a:visited,
.sv3 dd a:hover,
.sv3 dd a:active{
 color:#333;
 display:block;
 text-align:right;
}
</style>
</head>
<body>
<div id="idSlideView3" class="sv3">
  <dl class="on">
    <dt> 栏目一 </dt>
    <dd> 内容一 </dd>
  </dl>
  <dl>
    <dt> 栏目二 </dt>
    <dd> 内容二 </dd>
  </dl>
  <dl>
    <dt> 栏目三 </dt>
    <dd> 内容三 </dd>
  </dl>
  <dl>
    <dt> 栏目四 </dt>
    <dd> 内容四</dd>
  </dl>
  <dl>
    <dt> 栏目五 </dt>
    <dd> 内容五 </dd>
  </dl>
</div>
<script language="javascript">
function SlideView(e){
   for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){
       j.style.height=(i?24:379)+'px';
       j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,379,24)(p=i,24,379)},200)};
   }
   function _(el,f,t){
       c(el.$1);el.className=f>t?'':'on';
       return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t?'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_
   }
};
new SlideView( "idSlideView3");
</script>
</body>
</html>

<p align="center">本特效由 <a href="http://www.CsrCode.cn">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</p>

本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
(本文由 CsrCode.CN|芯晴网页特效 收集丨www.CsrCode.cn
本文网址:
评论信息
抱歉,本文暂停评论留言。