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