仿騰訊QQ豎直滑動(dòng)導(dǎo)航菜單

2024-09-05 12:20:39

字體：大中小

供稿：網(wǎng)友

仿騰訊QQ豎直滑動(dòng)導(dǎo)航菜單，叫法比較多，折疊菜單是最常用的叫法，有人稱(chēng)它為手風(fēng)琴，因?yàn)樗粫?huì)展開(kāi)一會(huì)折疊很像手風(fēng)琴的琴鍵，大家支持一下。

<html><head><title>仿騰訊QQ豎直滑動(dòng)導(dǎo)航菜單</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   class="70qarhlowxag"   id="idSlideView3" class="sv3">  <dl class="on">    <dt> 欄目一 </dt>    <dd> 內(nèi)容一 </dd>  </dl>  <dl>    <dt> 欄目二 </dt>    <dd> 內(nèi)容二 </dd>  </dl>  <dl>    <dt> 欄目三 </dt>    <dd> 內(nèi)容三 </dd>  </dl>  <dl>    <dt> 欄目四 </dt>    <dd> 內(nèi)容四</dd>  </dl>  <dl>    <dt> 欄目五 </dt>    <dd> 內(nèi)容五 </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>

上一篇：CSS的下拉菜單

下一篇：泡沫彈出框式的側(cè)邊導(dǎo)航菜單