本文实例讲述了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程序设计有所帮助。