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


Posted in Javascript onSeptember 11, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

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

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

Javascript 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
js 字符串操作函数
Jul 25 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 #Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 #Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 #Javascript
You might like
PHP字符串的连接的简单实例
2013/12/30 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
JavaScript触发器详解
2007/03/10 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
化学实验员岗位职责
2013/12/28 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
教师个人培训总结
2015/02/11 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
人力资源部工作计划
2019/05/14 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技