JS基于构造函数实现的菜单滑动显隐效果【测试可用】


Posted in Javascript onJune 21, 2016

本文实例讲述了JS基于构造函数实现的菜单滑动显隐效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

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" />
<meta http-equiv="Content-Type" content="; charset=utf-8" />
<title>JS树型菜单</title>
<script language="javascript">
function SDMenu(id) {
 if (!document.getElementById || !document.getElementsByTagName)
 return false;
 this.menu = document.getElementById(id);
 this.submenus = this.menu.getElementsByTagName("div");
 this.remember = true;
 this.speed = 1;
 this.markCurrent = true;
 this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
 var mainInstance = this;
 for (var i = 0; i < this.submenus.length; i++)
 this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
  mainInstance.toggleMenu(this.parentNode);
 };
 /*if (this.markCurrent) {
 var links = this.menu.getElementsByTagName("a");
 for (var i = 0; i < links.length; i++)
  if (links[i].href == document.location.href) {
  links[i].className = "current";
  break;
  }
 }*/
 if (this.remember) {
 var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
 var match = regex.exec(document.cookie);
 if (match) {
  var states = match[1].split("");
  for (var i = 0; i < states.length; i++)
  this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
 }
 }
};
SDMenu.prototype.toggleMenu = function(submenu) {
 if (submenu.className == "collapsed")
 this.expandMenu(submenu);
 else
 this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = 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 = "";
  mainInstance.memorize();
 }
 }, 10);
 //this.collapseOthers(submenu); 
};
SDMenu.prototype.collapseMenu = 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 = "collapsed";
  mainInstance.memorize();
 }
 }, 10);
};
/*SDMenu.prototype.collapseOthers = function(submenu) { 
 if (this.oneSmOnly) {
 for (var i = 0; i < this.submenus.length; i++)
  if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
  this.collapseMenu(this.submenus[i]);
 }
};*/
SDMenu.prototype.memorize = function() {
 if (this.remember) {
 var states = new Array();
 for (var i = 0; i < this.submenus.length; i++)
  states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
 var d = new Date();
 d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
 document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
 }
};
var myMenu;
window.onload = function() {
 myMenu = new SDMenu("my_menu");
 myMenu.init();
};
</script>
<style type="text/css">
 html,body{
 height:100%;
 margin:0;
 font-size:12px;
 }
 span{
 background:#F0DFBE;
 border:1px solid #ffffff;
 border-left:6px solid #F2A31B;
 width:228px;
 height:23px;
 display:block;
 line-height:23px;
 padding-left:20px;
 }
 a{
 padding:3px 0 3px 40px;
 display:block;
 color:#636363;
 }
 #my_menu{
 width:255px;
 background:#F7F2E4;
 height:100%;
 }
 div.sdmenu div.collapsed {
 height: 25px;
}
 div.sdmenu div{
 overflow: hidden;
 }
</style>
</head>
<body>
 <div style="float:left" id="my_menu" class="sdmenu">
 <div>
  <span>菜单一</span>
  <a href="#">>  菜单一子内容</a>
  <a href="#">>  菜单一子内容</a>
  <a href="#">>  菜单一子内容</a>
  <a href="#">>  菜单一子内容</a>
  <a href="#">>  菜单一子内容</a>
 </div>
 <div>
  <span>菜单二</span>
  <a href="#">>  菜单二子内容</a>
  <a href="#">>  菜单二子内容</a>
  <a href="#">>  菜单二子内容</a>
 </div>
 <div>
  <span>菜单三</span>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
 </div>
 <div>
  <span>菜单三</span>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
 </div>
 <div>
  <span>菜单三</span>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
 </div>
 <div>
  <span>菜单x</span>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
  <a href="#">>  菜单三子内容</a>
 </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 #Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 #Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 #Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 #Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 #Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 #Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
You might like
网站当前的在线人数
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
关于幼儿的自我评价
2013/12/18 职场文书
决心书标准格式
2014/03/11 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
社区国庆节活动总结
2015/03/23 职场文书
刑事起诉书范文
2015/05/19 职场文书
入党转正申请书范文
2019/05/20 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
MySQL分库分表详情
2021/09/25 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
golang实现浏览器导出excel文件功能
2022/03/25 Golang
pt-archiver 主键自增
2022/04/26 MySQL