滑動式摺疊菜單 － Slashdot's Menu

摺疊菜單讓你在儘量小的地方放置儘量多的內容，同時加大了操做的簡便性，所以，深受前臺設計師的喜好。隨着你們對動畫效果的鐘愛，摺疊菜單也開始「動」起來了，本文介紹的就是 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(); // 關閉全部菜單