仿腾讯QQ竖直滑动导航菜单

2024-09-05 12:20:39

字体：大中小

来源：转载

供稿：网友

仿腾讯QQ竖直滑动导航菜单，叫法比较多，折叠菜单是最常用的叫法，有人称它为手风琴，因为它一会展开一会折叠很像手风琴的琴键，大家支持一下。

<html><head><title>仿腾讯QQ竖直滑动导航菜单</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>

上一篇：CSS的下拉菜单

下一篇：泡沫弹出框式的侧边导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注