JS實現仿QQ面板的手風琴效果折疊菜單代碼
編輯：關於JavaScript
本文實例講述了JS實現仿QQ面板的手風琴效果折疊菜單代碼。分享給大家供大家參考。具體如下：
這是一款簡單實用的垂直導航菜單，有人把這種風格稱為“手風琴”菜單，類似仿QQ面板的折疊菜單，鼠標放在任意一個菜單上，它會展開所屬的二級菜單，很不錯的選擇，以前就分享過此類菜單，這次經過了代碼優化升級，更人性化了。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>簡單實用的垂直導航菜單</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>
<h3>簡單實用的垂直導航菜單</h3>
<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> ASP源碼 </dt>
<dd> 內容四</dd>
</dl>
<dl>
<dt> PHP源碼 </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>
希望本文所述對大家的JavaScript程序設計有所幫助。
小編推薦
熱門推薦