滑动式折叠菜单 － 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(); // 关闭所有菜单