铁雪资源网 Design By www.gsvan.com

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

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

运行效果截图如下:

JS实现仿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"idSlideView3");
</script>
</body>
</html>

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

标签:
JS,QQ面板,手风琴,折叠菜单

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“JS实现仿QQ面板的手风琴效果折叠菜单代码”

暂无JS实现仿QQ面板的手风琴效果折叠菜单代码的评论...