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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python龙贝格法求积分实例
2020/02/29 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
C#面试题问题集
2016/04/02 面试题
个人自我鉴定写法
2013/11/30 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
个人向公司借款协议书
2014/10/09 职场文书