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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/

具体代码如下：

.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源码 
 
 内容五 
 

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