快捷導(dǎo)航

JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼

更新時(shí)間：2015年09月11日 18:16:27 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)仿QQ面板的手風(fēng)琴效果折疊菜單代碼。分享給大家供大家參考。具體如下：

這是一款簡(jiǎn)單實(shí)用的垂直導(dǎo)航菜單，有人把這種風(fēng)格稱(chēng)為“手風(fēng)琴”菜單，類(lèi)似仿QQ面板的折疊菜單，鼠標(biāo)放在任意一個(gè)菜單上，它會(huì)展開(kāi)所屬的二級(jí)菜單，很不錯(cuò)的選擇，以前就分享過(guò)此類(lèi)菜單，這次經(jīng)過(guò)了代碼優(yōu)化升級(jí)，更人性化了。

運(yùn)行效果截圖如下：

在線演示地址如下：

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>簡(jiǎn)單實(shí)用的垂直導(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>
<h3>簡(jiǎn)單實(shí)用的垂直導(dǎo)航菜單</h3>
<div id="idSlideView3" class="sv3">
 <dl class="on">
 <dt>網(wǎng)頁(yè)特效 </dt>
 <dd> 導(dǎo)航菜單</dd>
 </dl>
 <dl>
 <dt> 層與布局</dt>
 <dd> 內(nèi)容二 </dd>
 </dl>
 <dl>
 <dt> 表單相關(guān)</dt>
 <dd> 內(nèi)容三 </dd>
 </dl>
 <dl>
 <dt> ASP源碼 </dt>
 <dd> 內(nèi)容四</dd>
 </dl>
 <dl>
 <dt> PHP源碼 </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>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: