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 相关文章推荐
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery插件之easing使用
2010/08/19 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
Node.js中require的工作原理浅析
2014/06/24 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python 异常处理实例详解
2014/03/12 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python、Matlab求定积分的实现
2019/11/20 Python
详解python tkinter 图片插入问题
2020/09/03 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
求职信需要的五点内容
2014/02/01 职场文书
小学生作文评语
2014/04/18 职场文书
品牌转让协议书
2014/08/20 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android