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 相关文章推荐
js的逻辑运算符 ||
May 31 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
几个学习PHP的网址
2006/11/25 PHP
php单一接口的实现方法
2015/06/20 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript包装对象实例分析
2015/03/27 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python端口扫描系统实现方法
2014/11/19 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python中 * 的用法详解
2019/07/10 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
用python批量下载apk
2020/12/29 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
大学新生欢迎词
2014/01/10 职场文书
终止劳动合同协议书
2014/10/05 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server