search

Home  >  Article  >  Web Front-end  >  JS implements QQ panel accordion effect folding menu code_javascript skills

JS implements QQ panel accordion effect folding menu code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:39:431211browse

本文实例讲述了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&#63;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&#63;'':'on';
  return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t&#63;'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_
 }
};
new SlideView( "idSlideView3");
</script>
</body>
</html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Pure js code enables elements with unknown width and height to be displayed vertically, horizontally and centered in the specified element_javascript skillsNext article：Pure js code enables elements with unknown width and height to be displayed vertically, horizontally and centered in the specified element_javascript skills

Related articles

See more