This article describes the menu sliding revealing effect implemented by JS based on constructor. Share it for your reference, as follows:
The screenshot of the running effect is as follows:
The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Type" content="; charset=utf-8" /><title>JS tree menu</title><script language="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 = 1; 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(); } }, 10); //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(); } }, 10);};/*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.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=/"; }};var myMenu;window.onload = function() { myMenu = new SDMenu("my_menu"); myMenu.init();};</script><style type="text/css"> html,body{ height:100%; margin:0; font-size:12px; } span{ background:#F0DFBE; border:1px solid #ffffff; border-left:6px solid #F2A31B; width:228px; height:23px; display:block; line-height:23px; padding-left:20px; } a{ padding:3px 0 3px 40px; display:block; color:#636363; } #my_menu{ width:255px; background:#F7F2E4; height:100%; } div.sdmenu div.collapsed { height: 25px;} div.sdmenu div{ overflow: hidden; }</style></head><body> <div style="float:left" id="my_menu"> <div> <span>Menu One</span> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> </div> <div> <span>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> <a href="#">>Menu subcontent</a> href="#">>Menu Three Sub-Content</a> </div> <div> <span>Menu Three</span> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> </div> <div> <span>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> <a href="#">>Menu Three Sub-Content</a> </div> </div></body></html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.