使用纯JavaScript+CSS制作伸缩菜单
2011-07-29 14:12
615 查看
不用框架,纯JavaScript+CSS制作的二级伸缩菜单,简单易懂,具有很强的定制性和重复开发性。
程序说明:
页面调用方法:
程序说明:
程序说明:
页面调用方法:
<!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"> <title>JavaScript可伸缩菜单 - Oncoding编码营原创</title> <!--引入JS文件--> <script type="text/javascript" src="jsmenu.js"></script> ..... <!--加载程序--> <body onload = "initMenu()"> <!--此处须定义ID--> <div class="jsmenu" id="pm_menu"> <!--展开的一级分类--> <div> <span class="fath">业界资讯</span> <p class="son"> <!--class="current"当前所在二级分类--> <a class="current" href="#">业界新闻</a> <a href="#">技术动态</a> <a href="#">八卦评论</a> </p> </div> <!--闭合的一级分类--> <div class="collapsed"> .... </div> <!--独立的一级分类--> <div><span class="single"><a href="#">酷站</a></span></div> .... |
//在ID为“js_menu”的div内开始程序 function initMenu(){ var pm_menu = new JSMenu("js_menu"); pm_menu.init(); } //定义主函数 function JSMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); } //引入函数,取得所有span JSMenu.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); }; this.expandOne(); }; //展开含"current"的菜单 JSMenu.prototype.expandOne = function() { for (var i = 0; i < this.submenus.length; i++) { var links = this.submenus[i].getElementsByTagName("a"); for (var j = 0; j < links.length; j++){ if (links[j].className == "current") this.expandMenu(this.submenus[i]); } } }; //变换菜单状态函数 JSMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; //展开所有菜单函数 JSMenu.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(5 * 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 = ""; } }, 30); this.collapseOthers(submenu); }; //折叠菜单函数 JSMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(5 * 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"; } }, 30); }; //折叠其他菜单函数 JSMenu.prototype.collapseOthers = function(submenu) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; |
相关文章推荐
- html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)
- 使用 Javascript 并结合 XML 制作滑动透明的菜单,且该菜单拥有跟随鼠标的注释
- 使用CSS 制作导航菜单 (一)
- Odometer使用JavaScript和CSS制作数字滑动效果
- CSS+DIV+Javascript制作滑动门菜单技术
- 使用CSS 制作导航菜单 (二)
- 前端开发css实战:使用css制作网页中的多级菜单
- CSSDIVJavascript制作滑动门菜单技术
- 如何使用CSS制作横向菜单
- HTML/CSS导航菜单-伸缩菜单的制作(垂直方向)
- 使用CSS 制作导航菜单
- 使用 Javascript 并结合 XML 制作滑动透明的菜单,且该菜单拥有跟随鼠标的注释 (转载)
- 使用css+js制作水平菜单
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- css 制作的三级菜单也可以当做二级菜单使用
- 使用HTML+CSS+JS制作简单的网页菜单界面
- javascript使用DOM模型和CSS实现菜单的折叠和展开
- 使用DIV+CSS制作二级导航菜单(横向)
- Javascript制作伸缩的二级菜单