JS实现适合于后台使用的动画折叠菜单效果


Posted in Javascript onSeptember 21, 2015

本文实例讲述了JS实现适合于后台使用的动画折叠菜单效果。分享给大家供大家参考。具体如下:

这是一款适合于后台使用的动画折叠菜单,代码超简,无jQuery,展开与折叠效果平滑。本演示中有两组菜单,向大家展示如何在一个网页中布局两个菜单,整体效果以及兼容性还算可以,希望在实际应用中不会出现什么问题。

运行效果截图如下:

JS实现适合于后台使用的动画折叠菜单效果

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适合于后台使用的动画折叠菜单</title>
<script type="text/javascript">
 function FOLDMenu(id,onlyone){
  if(!document.getElementById || !document.getElementsByTagName){return false;}
  this.menu=document.getElementById(id);
  this.submenu=this.menu.getElementsByTagName("ul");
  this.speed=3;
  this.time=10;
  this.onlyone=onlyone==true?onlyone:false;
  this.links = this.menu.getElementsByTagName("a");
 }
 FOLDMenu.prototype.init=function(){
  var mainInstance = this;
  for(var i=0;i<this.submenu.length;i++){
   this.submenu[i].getElementsByTagName("span")[0].onclick=function(){
    mainInstance.toogleMenu(this.parentNode);
   };
  }
  for(var i=0;i<this.links.length;i++){
   this.links[i].onclick=function(){
    this.className = "current";
    mainInstance.removeCurrent(this);
   }
  }
 }
 FOLDMenu.prototype.removeCurrent = function(link){
   for (var i = 0; i < this.links.length; i++){
    if (this.links[i] != link){
     this.links[i].className = " "; 
    }
   }
 }
 FOLDMenu.prototype.toogleMenu=function(submenu){
  if(submenu.className=="open"){
   this.closeMenu(submenu);
  }else{
   this.openMenu(submenu);
  }
 }
 FOLDMenu.prototype.openMenu=function(submenu){
  var fullHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
  var links = submenu.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++){
   fullHeight += links[i].offsetHeight;
  }
   var moveBy = Math.round(this.speed * links.length); 
   var mainInstance = this; 
    var intId = setInterval(function() { 
     var curHeight = submenu.offsetHeight; 
     var newHeight = curHeight + moveBy; 
     if (newHeight <fullHeight){
      submenu.style.height = newHeight + "px";
     }else {
      clearInterval(intId);
      submenu.style.height = ""; 
      submenu.className = "open";
     } 
    }, this.time); 
    this.collapseOthers(submenu);
 }
 FOLDMenu.prototype.closeMenu=function(submenu){
   var minHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
   var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
   var mainInstance = this;
    var intId = setInterval(function() {
     var curHeight = submenu.offsetHeight;
     var newHeight = curHeight - moveBy;
     if (newHeight > minHeight){
      submenu.style.height = newHeight + "px";
     }else {
      clearInterval(intId);
      submenu.style.height = ""; 
      submenu.className = "";
     } 
    }, this.time); 
 }
 FOLDMenu.prototype.collapseOthers = function(submenu){
  if(this.onlyone){
   for (var i = 0; i < this.submenu.length; i++){
    if (this.submenu[i] != submenu){
     this.closeMenu(this.submenu[i]); 
    }
   }
  }
 }
</script>
<style type="text/css">
*{margin:0;padding:0;}
.foldmenu{border:1px solid #000;width:150px;margin:50px;}
.foldmenu ul{list-style-type:none;height:25px;line-height:25px;overflow:hidden;cursor:pointer;}
.foldmenu ul.open{height:auto;}
.foldmenu ul span{display:block;padding-left:5px}
.foldmenu ul li{border-bottom:1px solid #DDDDDD;}
.foldmenu li a{background-color:#EEEEEE;color:#006666;display:block;padding:5px 10px;text-decoration:none;text-align:center;}
.foldmenu li a:hover{background-color:#006666;color:#ffffff;}
.foldmenu li a.current{background-color:#006666;color:#ffffff;}
</style>
</head>
<body>
<div id="foldmenu" class="foldmenu" style="float:left;">
 <ul class="open">
  <span>编程天地</span>
 <li><a href="#">电子书籍</a></li>
 <li><a href="#">源码乐园</a></li>
 </ul>
 <ul>
  <span>中国门户</span>
 <li><a href="#">百度搜索</a></li>
 <li><a href="#">新浪新闻</a></li>
  <li><a href="#">腾讯QQ</a></li>
 </ul>
 <ul>
  <span>音乐网站</span>
 <li><a href="#">百度音乐</a></li>
 <li><a href="#">QQ163</a></li>
 </ul>
</div>
<div id="foldmenu2" class="foldmenu" style="float:right;">
 <ul class="open">
  <span>世界大学</span>
 <li><a href="#">剑桥</a></li>
 <li><a href="#">牛津</a></li>
  <li><a href="#">哈佛</a></li>
 <li><a href="#">麻省理工</a></li>
 </ul>
 <ul>
  <span>中国大学</span>
 <li><a href="#">北大</a></li>
 <li><a href="#">清华</a></li>
  <li><a href="#">港大</a></li>
 </ul>
 <ul>
  <span>世界好车</span>
 <li><a href="#">宝马</a></li>
 <li><a href="#">奔驰</a></li>
 <li><a href="#">奥迪</a></li>
 </ul>
 <ul>
  <span>开源论坛</span>
 <li><a href="#">PhpWind</a></li>
 <li><a href="#">Discuz!</a></li>
 </ul>
</div>
<script type="text/javascript">
window.onload = function() {
 myMenu = new FOLDMenu("foldmenu",true);
 myMenu.init();
 myMenu2 = new FOLDMenu("foldmenu2");
 myMenu2.init();
};
</script>
</body>
</html>

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

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 #Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 #Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 #Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
附件名前加网站名
2008/03/23 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
八年级历史教学反思
2014/01/10 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Python中requests库的用法详解
2022/06/05 Python