html折叠 手风琴效果,JS实现仿QQ面板的手风琴效果折叠菜单代码

本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码。分享给大家供大家参考。具体如下：

这是一款简单实用的垂直导航菜单，有人把这种风格称为“手风琴”菜单，类似仿QQ面板的折叠菜单，鼠标放在任意一个菜单上，它会展开所属的二级菜单，很不错的选择，以前就分享过此类菜单，这次经过了代码优化升级，更人性化了。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

简单实用的垂直导航菜单

.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;

}

简单实用的垂直导航菜单

网页特效

导航菜单

层与布局

内容二

表单相关

内容三

ASP源码

内容四

PHP源码

内容五

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.οnmοuseοver=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");

希望本文所述对大家的JavaScript程序设计有所帮助。