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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
28个JS验证函数收集
Mar 02 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
详解javascript高级定时器
Dec 31 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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 读取文件乱码问题
2010/02/20 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
javascript json 新手入门文档
2009/12/03 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
浅谈js原生拖放
2016/11/21 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
详解webpack+express多页站点开发
2017/12/22 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python对数组进行反转的方法
2015/05/20 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python asyncio 协程库的使用
2021/01/21 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
公司门卫管理制度
2014/02/01 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
求职意向书
2014/04/01 职场文书
聘用意向书
2014/07/29 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年维修工作总结
2014/11/22 职场文书
2015教师年度考核评语
2015/03/25 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
世界文化遗产导游词
2019/08/07 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js