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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
js 上传图片预览问题
Dec 06 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
关于JS中prototype的理解
Sep 07 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 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
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php 定义404页面的实现代码
2012/11/19 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python元组的概念知识点
2019/11/19 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
计算机个人求职信范例
2014/01/24 职场文书
初中同学会活动方案
2014/08/22 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
爱国主义主题班会
2015/08/14 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题