本文实例讲述了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程序设计有所帮助。



