网页设计之如何使用纯JavaScript+CSS制作伸缩菜单

　　前段时间项目里用到的，项目已经发布，今天整理一下发出来。

　　不用框架，纯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>
　　 
　　 <script type="text/javascript" src=http://www.chinaz.com/Design/Pages/"jsmenu.js"></script>

.....
　　 
　　<body onload = "initMenu()">
　　 
　　 <div class="jsmenu" id="pm_menu">
　　 
　　 <div>
　　 <span class="fath">业界资讯</span>
　　 <p class="son">
　　 
　　 <a class="current" href=http://www.chinaz.com/Design/Pages/"#">业界新闻</a>
　　 <a href=http://www.chinaz.com/Design/Pages/"#">技术动态</a>
　　 <a href=http://www.chinaz.com/Design/Pages/"#">八卦评论</a>
　　 </p>
　　 </div>
　　 
　　 <div class="collapsed">
　　
　　 ....

</div>
　　 
　　 <div><span class="single"><a href=http://www.chinaz.com/Design/Pages/"#">酷站</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.submenusi.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.submenusi.getElementsByTagName("a");
　　 for (var j = 0; j < links.length; j++){
　　 if (linksj.className == "current")
　　 this.expandMenu(this.submenusi);
　　 }
　　 }
　　};
　　//变换菜单状态函数
　　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 += linksi.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.submenusi != submenu && this.submenusi.className != "collapsed")
　　 this.collapseMenu(this.submenusi);
　　};