教程集 > 脚本编程 > javascript > 正文一款简单js折叠菜单程序代码

一款简单js折叠菜单程序代码

发布时间：2016-10-10 编辑：jiaochengji.com

教程集为您提供一款简单js折叠菜单程序代码等资源，欢迎您收藏本站，我们将为您提供最新的一款简单js折叠菜单程序代码资源

利用js制作的折叠菜单有许多，主要应用在后台的左侧导航，点击可以上下进行折叠，前台也有不少折叠样式的菜单，对用户的体验很好，js菜单的制作也很简单，最简单的没几行代码，今天需要一个后台的折叠菜单，因为本人懒得很，所以只能奉行拿来主义了。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slashdot's Menu</title> <style> div.sdmenu { width: 150px; font-family: Arial, sans-serif; font-size: 12px; padding-bottom: 10px; background: url(bottom.gif) no-repeat right bottom; color: #fff; } div.sdmenu div { background: url(title.gif) repeat-x; overflow: hidden; } div.sdmenu div:first-child { background: url(toptitle.gif) no-repeat; } div.sdmenu div.collapsed { height: 25px; } div.sdmenu div span { display: block; padding: 5px 25px; font-weight: bold; color: white; background: url(expanded.gif) no-repeat 10px center; cursor: default; border-bottom: 1px solid #ddd; } div.sdmenu div.collapsed span { background-image: url(collapsed.gif); } div.sdmenu div a { padding: 5px 10px; background: #eee; display: block; border-bottom: 1px solid #ddd; color: #066; } div.sdmenu div a.current { background : #ccc; } div.sdmenu div a:hover { background : #066 url(linkarrow.gif) no-repeat right center; color: #fff; text-decoration: none; } </style> <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> <script type="text/javascript"> // </script> </head> <body>

<span>Online Tools</span> Image Optimizer FavIcon Generator Email Riddler htaccess Password Gradient Image Button Maker

<span>Support Us</span> Recommend Us Link to Us Web Resources

<span>Partners</span> JavaScript Kit CSS Drive CodingForums CSS Examples

<span>Test Current</span> Current or not Current or not Current or not

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
一款简单js折叠菜单程序代码
 js折叠菜单代码
 js 超简单网站后台折叠菜单代码
 超简单的js网站后台管理功能折叠菜单代码
 基于JQuery的简单实现折叠菜单代码
 JS折叠展开一个二级导航菜单效果
 js 三级折叠菜单代码效果
 jquery下拉菜单实现代码(折叠菜单修改)
js 下拉折叠菜单代码
 兼容多浏览器高亮带缓冲的二级折叠菜单效果

上一篇：纯CSS3水平动态导航菜单例子下一篇：JS封装类年月日三级联动下拉列表

[关闭]

一款简单js折叠菜单程序代码

最近更新

浏览排行