折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱。随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单效果-Slashdot's Menu。
 
  1. <script type="text/javascript">
  2. function SDMenu(id) {
  3.     if (!document.getElementById || !document.getElementsByTagName)
  4.         return false;
  5.     this.menu = document.getElementById(id);
  6.     this.submenus = this.menu.getElementsByTagName("div");
  7.     this.remember = true;
  8.     this.speed = 3;
  9.     this.markCurrent = true;
  10.     this.oneSmOnly = false;
  11. }
  12. SDMenu.prototype.init = function() {
  13.     var mainInstance = this;
  14.     for (var i = 0; i < this.submenus.length; i++)
  15.         this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
  16.             mainInstance.toggleMenu(this.parentNode);
  17.         };
  18.     if (this.markCurrent) {
  19.         var links = this.menu.getElementsByTagName("a");
  20.         for (var i = 0; i < links.length; i++)
  21.             if (links[i].href == document.location.href) {
  22.                 links[i].className = "current";
  23.                 break;
  24.             }
  25.     }
  26.     if (this.remember) {
  27.         var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
  28.         var match = regex.exec(document.cookie);
  29.         if (match) {
  30.             var states = match[1].split("");
  31.             for (var i = 0; i < states.length; i++)
  32.                 this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
  33.         }
  34.     }
  35. };
  36. SDMenu.prototype.toggleMenu = function(submenu) {
  37.     if (submenu.className == "collapsed")
  38.         this.expandMenu(submenu);
  39.     else
  40.         this.collapseMenu(submenu);
  41. };
  42. SDMenu.prototype.expandMenu = function(submenu) {
  43.     var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
  44.     var links = submenu.getElementsByTagName("a");
  45.     for (var i = 0; i < links.length; i++)
  46.         fullHeight += links[i].offsetHeight;
  47.     var moveBy = Math.round(this.speed * links.length);
  48.     var mainInstance = this;
  49.     var intId = setInterval(function() {
  50.         var curHeight = submenu.offsetHeight;
  51.         var newHeight = curHeight + moveBy;
  52.         if (newHeight < fullHeight)
  53.             submenu.style.height = newHeight + "px";
  54.         else {
  55.             clearInterval(intId);
  56.             submenu.style.height = "";
  57.             submenu.className = "";
  58.             mainInstance.memorize();
  59.         }
  60.     }, 30);
  61.     this.collapseOthers(submenu);
  62. };
  63. SDMenu.prototype.collapseMenu = function(submenu) {
  64.     var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
  65.     var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
  66.     var mainInstance = this;
  67.     var intId = setInterval(function() {
  68.         var curHeight = submenu.offsetHeight;
  69.         var newHeight = curHeight - moveBy;
  70.         if (newHeight > minHeight)
  71.             submenu.style.height = newHeight + "px";
  72.         else {
  73.             clearInterval(intId);
  74.             submenu.style.height = "";
  75.             submenu.className = "collapsed";
  76.             mainInstance.memorize();
  77.         }
  78.     }, 30);
  79. };
  80. SDMenu.prototype.collapseOthers = function(submenu) {
  81.     if (this.oneSmOnly) {
  82.         for (var i = 0; i < this.submenus.length; i++)
  83.             if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
  84.                 this.collapseMenu(this.submenus[i]);
  85.     }
  86. };
  87. SDMenu.prototype.expandAll = function() {
  88.     var oldOneSmOnly = this.oneSmOnly;
  89.     this.oneSmOnly = false;
  90.     for (var i = 0; i < this.submenus.length; i++)
  91.         if (this.submenus[i].className == "collapsed")
  92.             this.expandMenu(this.submenus[i]);
  93.     this.oneSmOnly = oldOneSmOnly;
  94. };
  95. SDMenu.prototype.collapseAll = function() {
  96.     for (var i = 0; i < this.submenus.length; i++)
  97.         if (this.submenus[i].className != "collapsed")
  98.             this.collapseMenu(this.submenus[i]);
  99. };
  100. SDMenu.prototype.memorize = function() {
  101.     if (this.remember) {
  102.         var states = new Array();
  103.         for (var i = 0; i < this.submenus.length; i++)
  104.             states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
  105.         var d = new Date();
  106.         d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
  107.         document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
  108.     }
  109. };
  110. </script>

调用方式
HTML:

    1.  
    2. var myMenu = new SDMenu("main_menu"); // 菜单ID
    3.  
    4. // 默认参数
    5. myMenu.speed = 3; // 折叠速度
    6. myMenu.remember = true; // 是否记录状态
    7. myMenu.oneSmOnly = false; // 一次只有一个菜单打开
    8. myMenu.markCurrent = true; // 是否高亮当前菜单
    9.  
    10. myMenu.init();
    11.  
    12. // 附加方法
    13. var firstSubmenu = myMenu.submenus[0];
    14. myMenu.expandMenu(firstSubmenu); // 打开一个菜单
    15. myMenu.collapseMenu(firstSubmenu); // 关闭一个菜单
    16. myMenu.toggleMenu(firstSubmenu); // 当菜单关闭时打开,当菜单打开时关闭
    17.  
    18. myMenu.expandAll(); // 打开所有菜单
    19. myMenu.collapseAll(); // 关闭所有菜单

滑动式折叠菜单 - Slashdot's Menu的更多相关文章

  1. CSS:响应式下的折叠菜单(条纹式)

    原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...

  2. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  3. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  5. JS+CSS打造三级折叠菜单,自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  7. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  8. CSS+JS相应式导航菜单

    响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...

  9. 响应式导航菜单(css+js)

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

随机推荐

  1. 今天谈谈流,什么是IO流?

    无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...

  2. oracle 锁表问题

    oracle执行表数据更新的时候,会遇到锁表问题,比方说,会遇到这样的问题,主要原因是这张表被其他人占用,修改数据没有提交.oracle为了避免脏数据的产生,在其安全机制下,锁住该表. 执行如下操作, ...

  3. MyBatis调用Oracle存储过程

    MyBatis调用Oracle存储过程 1.无输入和输出参数的存储过程 2.带有输入和输出参数的存储过程 3.返回游标的存储过程 mybatis中的配置文件代码 <resultMap type= ...

  4. 客户端实现蓝牙接收(C#)

    知识总结发布  (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...

  5. web前端之HTML中元素的区分

    作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显 ...

  6. OSX的一些基本知识

    1, 熟悉OSX常用的热键: 花 +C 拷贝(注意,复制是在当前目录中制作一个副本,跟拷贝意义不一样) 花 +V 粘贴(如果用拖拽的方式进行复制,需要按住Option键,相当于Windows的Ctrl ...

  7. SQL Server 2014 安装图解

    服务器:Windows server 2012 R2 SQL:SQL Server 2014 Step 1 安装前 双击 Setup.exe 安装文件 选择第一项:New SQL Server sta ...

  8. 如何隐藏winform中报表设计器中的按钮

    https://www.devexpress.com/Support/Center/Question/Details/T246117 DesignMdiController.SetCommandVis ...

  9. [转] charles使用教程指南

    charles使用教程指南   0x01 前言: Charles是一款抓包修改工具,相比起burp,charles具有界面简单直观,易于上手,数据请求控制容易,修改简单,抓取数据的开始暂停方便等等优势 ...

  10. hdu4087ALetter to Programmers(三维旋转矩阵)

    参考 三维旋转矩阵 + 矩阵加速 这个还要用到仿射变换. 平移 translate tx ty tz 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 缩放 scale kx ky ...