JavaScript Sliding-folding Menu Implementation code

First look at the effect,

It's like backstage operation, okay, let's look at the example method

JS code is as follows

The code is as follows

Copy Code

<script type= "Text/javascript" > function Sdmenu (ID) { if (!document.getelementbyid | |!document.getelementsbytagname) return false; This.menu = document.getElementById (ID); This.submenus = This.menu.getElementsByTagName ("div"); This.remember = true; This.speed = 3; This.markcurrent = true; This.onesmonly = false; } SDMenu.prototype.init = function () { var maininstance = this; for (var i = 0; i < this.submenus.length; i++) This.submenus[i].getelementsbytagname ("span") [0].onclick = function () { Maininstance.togglemenu (This.parentnode); }; if (this.markcurrent) { var links = this.menu.getElementsByTagName ("a"); for (var i = 0; i < links.length; i++) if (links[i].href = = Document.location.href) { Links[i].classname = "current"; Break } } if (This.remember) { var regex = new RegExp ("Sdmenu_" + encodeuricomponent (this.menu.id) + "= ([01]+)"); var match = regex.exec (Document.cookie); if (match) { var states = Match[1].split (""); for (var i = 0; i < states.length; i++) This.submenus[i].classname = (States[i] = = 0? "Collapsed": ""); } } }; SDMenu.prototype.toggleMenu = function (submenu) { if (Submenu.classname = = "collapsed") This.expandmenu (submenu); Else This.collapsemenu (submenu); }; SDMenu.prototype.expandMenu = function (submenu) { var fullheight = Submenu.getelementsbytagname ("span") [0].offsetheight; var links = submenu.getelementsbytagname ("a"); for (var i = 0; i < links.length; i++) Fullheight + = Links[i].offsetheight; var moveby = Math.Round (This.speed * links.length); var maininstance = this; var intId = setinterval (function () { var curheight = submenu.offsetheight; var newheight = curheight + moveby; if (Newheight < fullheight) Submenu.style.height = newheight + "px"; else { Clearinterval (INTID); Submenu.style.height = ""; Submenu.classname = ""; Maininstance.memorize (); } }, 30); This.collapseothers (submenu); }; SDMenu.prototype.collapseMenu = function (submenu) { var minheight = Submenu.getelementsbytagname ("span") [0].offsetheight; var moveby = Math.Round (This.speed * Submenu.getelementsbytagname ("a"). length); var maininstance = this; var intId = setinterval (function () { var curheight = submenu.offsetheight; var newheight = Curheight-moveby; if (Newheight > MinHeight) Submenu.style.height = newheight + "px"; else { Clearinterval (INTID); Submenu.style.height = ""; Submenu.classname = "collapsed"; Maininstance.memorize (); } }, 30); }; SDMenu.prototype.collapseOthers = function (submenu) { if (this.onesmonly) { for (var i = 0; i < this.submenus.length; i++) if (This.submenus[i]!= submenu && this.submenus[i].classname!= "collapsed") This.collapsemenu (This.submenus[i]); } }; SDMenu.prototype.expandAll = function () { var oldonesmonly = this.onesmonly; This.onesmonly = false; for (var i = 0; i < this.submenus.length; i++) if (This.submenus[i].classname = = "collapsed") This.expandmenu (This.submenus[i]); This.onesmonly = oldonesmonly; }; SDMenu.prototype.collapseAll = function () { for (var i = 0; i < this.submenus.length; i++) if (This.submenus[i].classname!= "collapsed") This.collapsemenu (This.submenus[i]); }; SDMenu.prototype.memorize = function () { if (This.remember) { var states = new Array (); for (var i = 0; i < this.submenus.length; i++) States.push (This.submenus[i].classname = = "collapsed"? 0:1); var d = new Date (); D.settime (D.gettime () + (30 * 24 * 60 * 60 * 1000)); Document.cookie = "Sdmenu_" + encodeuricomponent (this.menu.id) + "=" + States.join ("") + "; Expires= "+ d.togmtstring () +"; path=/"; } }; </script>

Okay, now let's call this collapse menu method.

The code is as follows

Copy Code

var mymenu = new Sdmenu ("Main_Menu"); Menu ID www.111cn.net Default parameters Mymenu.speed = 3; Folding speed Mymenu.remember = true; Whether to record status Mymenu.onesmonly = false; Only one menu opens at a time Mymenu.markcurrent = true; Whether to highlight the current menu Mymenu.init (); Additional methods var firstsubmenu = mymenu.submenus[0]; Mymenu.expandmenu (Firstsubmenu); Open a Menu Mymenu.collapsemenu (Firstsubmenu); Close a menu Mymenu.togglemenu (Firstsubmenu); Open when menu is closed, close when menu is open Mymenu.expandall (); Open All Menus Mymenu.collapseall (); Close all Menus

So simple oh, Kazakhstan, like the reference.