本文实例讲述了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"idSlideView3"); </script> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路