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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
javascript知识点收藏
2007/02/22 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python学生信息管理系统修改版
2018/03/13 Python
python解析yaml文件过程详解
2019/08/30 Python
python文件和文件夹复制函数
2020/02/07 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
我为自己代言广告词
2014/03/18 职场文书
《秋游》教学反思
2014/04/24 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
56句经典英文座右铭
2019/08/09 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Python Django获取URL中的数据详解
2021/11/01 Python