折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱。随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 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.     
  49.     var mainInstance = this;
  50.     var intId = setInterval(function({
  51.         var curHeight = submenu.offsetHeight;
  52.         var newHeight = curHeight + moveBy;
  53.         if (newHeight < fullHeight)
  54.             submenu.style.height = newHeight + "px";
  55.         else {
  56.             clearInterval(intId);
  57.             submenu.style.height = "";
  58.             submenu.className = "";
  59.             mainInstance.memorize();
  60.         }
  61.     }, 30);
  62.     this.collapseOthers(submenu);
  63. };
  64. SDMenu.prototype.collapseMenu = function(submenu{
  65.     var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
  66.     var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
  67.     var mainInstance = this;
  68.     var intId = setInterval(function({
  69.         var curHeight = submenu.offsetHeight;
  70.         var newHeight = curHeight - moveBy;
  71.         if (newHeight > minHeight)
  72.             submenu.style.height = newHeight + "px";
  73.         else {
  74.             clearInterval(intId);
  75.             submenu.style.height = "";
  76.             submenu.className = "collapsed";
  77.             mainInstance.memorize();
  78.         }
  79.     }, 30);
  80. };
  81. SDMenu.prototype.collapseOthers = function(submenu{
  82.     if (this.oneSmOnly{
  83.         for (var i = 0; i < this.submenus.length; i++)
  84.             if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
  85.                 this.collapseMenu(this.submenus[i]);
  86.     }
  87. };
  88. SDMenu.prototype.expandAll = function({
  89.     var oldOneSmOnly = this.oneSmOnly;
  90.     this.oneSmOnly = false;
  91.     for (var i = 0; i < this.submenus.length; i++)
  92.         if (this.submenus[i].className == "collapsed")
  93.             this.expandMenu(this.submenus[i]);
  94.     this.oneSmOnly = oldOneSmOnly;
  95. };
  96. SDMenu.prototype.collapseAll = function({
  97.     for (var i = 0; i < this.submenus.length; i++)
  98.         if (this.submenus[i].className != "collapsed")
  99.             this.collapseMenu(this.submenus[i]);
  100. };
  101. SDMenu.prototype.memorize = function({
  102.     if (this.remember{
  103.         var states = new Array();
  104.         for (var i = 0; i < this.submenus.length; i++)
  105.             states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
  106.         var d = new Date();
  107.         d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
  108.         document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
  109.     }
  110. };
  111. </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(); // 关闭所有菜单
posted on 2016-10-12 18:21  风浪  阅读(585)  评论(0编辑  收藏  举报