新版本susymenu树形菜单，请大家指教、分享

更新时间：2007年09月28日 20:11:04 作者：

<html>     <body>          <div id="frame"></div>          </body> </html> <script type="text/javascript"> /*  Susy Menu Class, version 2.0.0  *  2007 shaoyu su   *  *  Susy-Menu Class is freely distributable .  *    *  *--------------------------------------------------------------------------*/ var CONTEXT_PATH=''; var NS = (navigator.appName=="Netscape")?true:false; var EXCEPTION_INFO = {EvalError:'eval()use error',                             RangeError:'num overflow',                         ReferenceError:'illegal or no can identify num',                         SyntaxError:'syntax parse error',                         TypeError:'operate num type error',                         URIError:'URI use error'                 }; String.prototype.trim = function(){     return this.replace(/(^[\\s]*)|([\\s]*$)/g, ""); } var menuItems = new Array(); Object.extend = function(destination, source) {   for (property in source) {     destination[property] = source[property];   }   return destination; } function Parameter(){     this.option = {         menuType:'0',         expandHeadImgUrl:'js/expandHead.gif',         expandBodyImgUrl:'',         expandFootImgUrl:'',         mergeHeadImgUrl:'js/mergeHead.gif',         mergeBodyImgUrl:'',         mergeFootImgUrl:'',         status:'merge',         headWidth:20,         bodyWidth:100,         footWidth:0,         height:20,         mLeft:15,         mTop:3,         fontFamily:'宋体',         fontSize:'12',         fontWeight:'normal',         fontStyle:'normal',         textAlign:'left',         color:'transparent',         gap:'2',         conBackImg:''     }; } Parameter.prototype.setParameter=function(option){     this.option = Object.extend(this.option,option || {}); } var lineN = 60; Parameter.prototype.show=function(mainDivId,menus){     var mainDiv = null;     lineN = 62;     try{         if( mainDivId && mainDivId != '')mainDiv = document.getElementById(mainDivId);         if(mainDiv != null){             var midDiv = document.createElement('div');             midDiv.style.position="absolute";             midDiv.style.left=mainDiv.offsetLeft;             midDiv.style.top=mainDiv.offsetTop;             lineN = 70;             var itemWidth = parseInt(this.option.headWidth)+parseInt(this.option.bodyWidth)+parseInt(this.option.footWidth);             if(menus){                 if(1 == parseInt(this.option.menuType)){                     midDiv.style.width=menus.length * (itemWidth + parseInt(this.option.mLeft) + parseInt(this.option.gap)) + parseInt(this.option.mLeft);                     midDiv.style.border="1px solid green";                 }                 lineN = 77;                 var openedMenuStr = getCookie("OpenedMenu");                 for(var i=0;i<menus.length;i++){                     lineN = 80;                     if(1 == parseInt(this.option.menuType)){                         menus[i].container.style.top = parseInt(this.option.mTop) + parseInt(this.option.height);                         if(i==0){                             menus[i].container.style.left = parseInt(this.option.mLeft);                         } else {                             menus[i].container.style.left = parseInt(menus[i-1].container.style.left) + itemWidth + parseInt(this.option.mLeft) + parseInt(this.option.gap)*2;                         }                         lineN = 89;                     }                     lineN = 91;                     menus[i].init(midDiv);                     lineN = 92;                     menus[i].show();                     lineN = 93;                 }                 if(menuItems && menuItems.length){                     if(openedMenuStr && openedMenuStr.trim()!=''                                      && parseInt(openedMenuStr) <= menuItems.length){                         menuItems[parseInt(openedMenuStr)].expandSuperior();                     }                 }                 lineN = 102;             } else {                 alert('Not Found menus Array.');             }                          mainDiv.appendChild(midDiv);         } else {             alert('Not Found Menu^s Container.');         }     } catch(ex) {         var line="",message="",description="",name="",number="";         if(ex.lineNumber)line= ex.lineNumber;         if(!line || line == '')line = lineN;         if(ex.message)message = ex.message;         if(ex.description)description = ex.description;         if(ex.number)number = ex.number;         if(ex.name)name = ex.name;         alert("Line Number: " + line + "\n" +               "Error      : " + message + "\n" +               "Error Type : " + EXCEPTION_INFO[name] + "\n" +               "Error Code : " + number);     } } var MenuUtil = new Parameter(); function Menu(title,url,children,option){     this.title = title;     this.url = url;     this.children = children;     this.option={};     Object.extend(this.option,MenuUtil.option || {});     Object.extend(this.option,option || {});     this.mouseOver=false;     this.timer=null;     this.index;          this.menuDiv = document.createElement('div');     this.container = document.createElement('div');     this.midDiv = document.createElement('div');     this.midA = document.createElement('a');     this.headImg = document.createElement('div');     this.bodyDiv = document.createElement('div');     this.footImg = document.createElement('div'); } Menu.prototype.init=function(superiorDiv,superior){     if(this.option.expandHeadImgUrl == ''){this.option.expandHeadImgUrl = this.option.mergeHeadImgUrl;}     if(this.option.expandBodyImgUrl == ''){this.option.expandBodyImgUrl = this.option.mergeBodyImgUrl;}     if(this.option.expandFootImgUrl == ''){this.option.expandFootImgUrl = this.option.mergeFootImgUrl;}     if(this.option.mergeHeadImgUrl == ''){this.option.mergeHeadImgUrl = this.option.expandHeadImgUrl;}     if(this.option.mergeBodyImgUrl == ''){this.option.mergeBodyImgUrl = this.option.expandBodyImgUrl;}     if(this.option.mergeFootImgUrl == ''){this.option.mergeFootImgUrl = this.option.expandFootImgUrl;}     if(superior){this.superior=superior;}     if(superiorDiv){         if(NS)             this.menuDiv.setAttribute('style','float:left');         else              this.menuDiv.style.styleFloat='left';         this.menuDiv.style.clear='both';         if('1'==this.option.menuType && !this.superior)this.menuDiv.style.clear='none';         this.menuDiv.style.marginLeft = this.option.mLeft;         var topValue = this.option.mTop;                  /*if('1'==this.option.menuType && this.superior){             topValue = parseInt(this.superior.option.height) + parseInt(topValue);         }*/                  this.menuDiv.style.marginTop = topValue;         if('1'==this.option.menuType){             if(this.option.conBackImg!='')this.container.style.backgroundImage='url("'+this.option.conBackImg+'")';             this.container.style.backgroundColor='royalblue';         }         this.container.style.display='none';              if(NS)             this.midDiv.setAttribute('style','float:left');         else              this.midDiv.style.styleFloat='left';         this.midDiv.style.width =(parseInt(this.option.headWidth)+parseInt(this.option.bodyWidth)+parseInt(this.option.footWidth)+6);         this.midDiv.style.height = this.option.height;                  if(NS)             this.midA.setAttribute('style','float:left');         else              this.midA.style.styleFloat='left';                  this.midA.style.width =(parseInt(this.option.headWidth)+parseInt(this.option.bodyWidth)+parseInt(this.option.footWidth)+5);         this.midA.style.height = this.option.height;         this.midA.style.display='block';         this.midA.style.textDecoration='none';         this.midA.style.cursor='pointer';         this.midA.url='#';         this.index=menuItems.length;         this.midA.index = this.index;         this.container.index = this.index;         this.menuDiv.index=this.index;         menuItems[this.midA.index] = this;         this.midA.onclick=function(){             if(menuItems && menuItems[this.index]){                 if(menuItems[this.index].superior)                     if('0'==menuItems[this.index].option.menuType)setCookie('OpenedMenu',''+menuItems[this.index].superior.midA.index);                 else                      setCookie('OpenedMenu',' ');                 if(menuItems[this.index].url && menuItems[this.index].url!='' && menuItems[this.index].url != '#'){                     window.location=menuItems[this.index].url;                 } else {                     if('1'==menuItems[this.index].option.menuType)return;                     if(menuItems[this.index].children){                          menuItems[this.index].changeStatus();                     }                 }             }         };         this.midA.onmouseover=function(){             if(menuItems && menuItems[this.index]){                 if(!this.status || this.status!='over'){                     if(menuItems[this.index].children && menuItems[this.index].children.length>0){                         if(menuItems[this.index].option.status=='merge')                             menuItems[this.index].changeSelfImg('expand');                     }                     if('1'==menuItems[this.index].option.menuType){                         menuItems[this.index].startExpandTimer();                     }                     this.status = 'over';                 }             }         };         this.midA.onmouseout=function(){             if(menuItems && menuItems[this.index]){                 if(!this.status || this.status!='out'){                     if(menuItems[this.index].children && menuItems[this.index].children.length>0){                         menuItems[this.index].changeSelfImg(menuItems[this.index].option.status);                     }                     if('1'==menuItems[this.index].option.menuType){                         menuItems[this.index].startMergeTimer();                     }                     this.status = 'out';                 }             }         };         this.menuDiv.onmouseover=function(){             if('1'!=menuItems[this.index].option.menuType)return;             if(menuItems[this.index].timer){                 window.clearTimeout(menuItems[this.index].timer);                 menuItems[this.index].timer=null;             }             menuItems[this.index].mouseOver=true;             //if(menuItems[this.index].superior)menuItems[this.index].superior.startExpandTimer();         }         this.menuDiv.onmouseout=function(){             if('1'!=menuItems[this.index].option.menuType)return;             menuItems[this.index].startMergeTimer();         }                  if(NS)             this.headImg.setAttribute('style','float:left');         else              this.headImg.style.styleFloat='left';         this.headImg.style.width = this.option.headWidth;         this.headImg.style.height = this.option.height;         this.headImg.style.backgroundColor=this.option.color;         this.headImg.style.backgroundRepeat='no-repeat';         this.headImg.style.backgroundPosition='0 50%';                  if(NS)             this.bodyDiv.setAttribute('style','float:left');         else              this.bodyDiv.style.styleFloat='left';         this.bodyDiv.style.width = this.option.bodyWidth;         this.bodyDiv.style.height = this.option.height;         this.bodyDiv.style.backgroundColor=this.option.color;         this.bodyDiv.style.fontFamily=this.option.fontFamily;         this.bodyDiv.style.fontWeight=this.option.fontWeight;         this.bodyDiv.style.fontSize=this.option.fontSize;         this.bodyDiv.style.fontStyle=this.option.fontStyle;         this.bodyDiv.style.textAlign=this.option.textAlign;         this.bodyDiv.style.lineHeight = this.bodyDiv.style.height;         this.bodyDiv.style.backgroundRepeat='no-repeat';         this.bodyDiv.style.backgroundPosition='0 50%';                  if(NS)             this.footImg.setAttribute('style','float:left');         else              this.footImg.style.styleFloat='left';         this.footImg.style.width = this.option.footWidth;         this.footImg.style.height = this.option.height;         this.footImg.style.backgroundColor=this.option.color;         this.headImg.style.backgroundRepeat='no-repeat';         this.headImg.style.backgroundPosition='0 50%';                  this.bodyDiv.innerHTML=this.title;                  this.midA.appendChild(this.headImg);         this.midA.appendChild(this.bodyDiv);         this.midA.appendChild(this.footImg);                  this.midDiv.appendChild(this.midA);         this.menuDiv.appendChild(this.midDiv);         this.menuDiv.appendChild(this.container);                  this.changeSelfImg('merge');         if('1' == this.option.menuType && this.superior){             this.container.style.left =0;             this.container.style.left = parseInt(this.container.style.left) + parseInt(this.midDiv.style.width) + parseInt(this.menuDiv.style.marginLeft) + parseInt(this.option.gap);         }         //this.container.style.top = parseInt(superiorDiv.style.top) + parseInt(this.menuDiv.style.marginTop);         //alert(this.container.style.top);         if(this.children){                 for(var i=0;i<this.children.length;i++){                 if('1' == this.option.menuType){                     sT = -parseInt(this.option.height) + 1;                     if(i>0)sT = parseInt(this.children[i-1].container.style.top);                     else if(!this.superior)sT = sT + parseInt(this.option.mTop);                     this.children[i].container.style.top = sT + parseInt(this.option.mTop) + parseInt(this.option.height);                 }                 this.children[i].init(this.container,this);             }         }         superiorDiv.appendChild(this.menuDiv);     } } Menu.prototype.changeStatus=function(source){     if(source && ''!=source)this.option.status=source;     if(this.option.status=='merge'){         this.expand();     } else {         this.merge();         if('1' == this.option.menuType && this.children){             for(var i=0;i<this.children.length;i++){                 this.children[i].changeStatus('expand');             }         }     } } Menu.prototype.expand=function(){     this.changeSelfImg('expand');     this.option.status='expand';     if('1' == this.option.menuType){         this.container.style.position='absolute';     }     this.container.style.display="block"; } Menu.prototype.merge=function(){     this.changeSelfImg('merge');     this.option.status='merge';     //this.hiddenChildren();     this.container.style.display="none"; } Menu.prototype.show=function(){     this.menuDiv.style.display="block";     if(!this.children || this.children==null){         this.changeSelfImg('expand');     } } Menu.prototype.hidden=function(){     this.menuDiv.style.display="none"; } Menu.prototype.expandSuperior=function(){     if(this.superior)this.superior.expandSuperior();     this.expand(); } Menu.prototype.showChildren=function(){     if(this.children){                 for(var i=0;i<this.children.length;i++){                 this.children[i].show();             }     } } Menu.prototype.hiddenChildren=function(){     if(this.children){                 for(var i=0;i<this.children.length;i++){                 this.children[i].hidden();             }     } } Menu.prototype.changeSelfImg=function(status){     if(status && status=='merge'){         if(this.option.mergeHeadImgUrl)this.headImg.style.backgroundImage='url('+CONTEXT_PATH+this.option.mergeHeadImgUrl+')';         if(this.option.mergeBodyImgUrl)this.bodyDiv.style.backgroundImage='url('+CONTEXT_PATH+this.option.mergeBodyImgUrl+')';         if(this.option.mergeFootImgUrl)this.footImg.style.backgroundImage='url('+CONTEXT_PATH+this.option.mergeFootImgUrl+')';     } else {         if(this.option.expandHeadImgUrl)this.headImg.style.backgroundImage='url('+CONTEXT_PATH+this.option.expandHeadImgUrl+')';         if(this.option.expandBodyImgUrl)this.bodyDiv.style.backgroundImage='url('+CONTEXT_PATH+this.option.expandBodyImgUrl+')';         if(this.option.expandFootImgUrl)this.footImg.style.backgroundImage='url('+CONTEXT_PATH+this.option.expandFootImgUrl+')';     } } Menu.prototype.startExpandTimer=function(){     if(this.timer){         window.clearTimeout(this.timer);         this.timer=null;     }     if(this.superior)this.superior.startExpandTimer();     if(this.children)this.changeStatus('merge');     //if(menuItems[this.index].superior)menuItems[this.index].superior.mouseOver=true;     this.mouseOver=true; } Menu.prototype.startMergeTimer=function(){     if(this.superior)this.superior.mouseOver==false;     if(this.timer){         window.clearTimeout(this.timer);         this.timer=null;     }     this.timer=window.setTimeout('menuItems['+this.index+']._execMerge()',200);     if(this.superior)this.superior.startMergeTimer();      } Menu.prototype._execMerge=function(){     this.changeStatus('expand'); } function setCookie(name, value) {     document.cookie = name + "=" + escape(value) + ";path=" + CONTEXT_PATH + "/"; } function getCookie(name) {         var str = document.cookie.split('; ');         for(i=0; i < str.length; i++) {                 var s = str[i].split('=');                 if (name == s[0].trim()) {                         return unescape(s[1].trim());                 }         }         return null; } function menuInit(mainDivId){                 var menus = null;             CONTEXT_PATH='';             MenuUtil.setParameter({expandHeadImgUrl:'http://bbs.blueidea.com/images/blue/smilies/smile.gif',                                     mergeHeadImgUrl:'http://bbs.blueidea.com/images/blue/smilies/wink.gif',                                     expandBodyImgUrl:'',                                     height:25,headWidth:22,bodyWidth:120,textAlign:'left',                                     menuType:'0',                                     conBackImg:''             });                              menus = [                     new Menu('menu01','#',[                         new Menu('sub01','#',[new Menu('sub11','#',[new Menu('sub21','#',[new Menu('sub31','#',[new Menu('sub41','#',[new Menu('sub51','#',[new Menu('sub61','#',[new Menu('sub71','#',null,{color:'#44bb22'})],{color:'#006699'})],{color:'#aa6622'})],{color:'#12ff66'})],{color:'#125600'})],{color:'yellow'})],{color:'green'})],{color:'red'}),                         new Menu('sub02','#',null),                         new Menu('sub03','#',[new Menu('sub31','#',[new Menu('sub311','',[new Menu('sub3111','#',null)])]),                                               new Menu('sub32','#',[new Menu('sub321','',[new Menu('sub3211','javascript:alert("this is location url");',null)])]),                                               new Menu('sub33','#',[new Menu('sub331','',[new Menu('sub3311','javascript:alert("this is location url");',null)])])                                                 ]),                         new Menu('sub04','#',null),                         new Menu('sub05','#',null)                     ],{color:'#aa99cc'}),                     new Menu('menu02','#',[                         new Menu('sub01','#',null),                         new Menu('sub02','#',null),                         new Menu('sub03','#',null),                         new Menu('sub04','#',null),                         new Menu('sub05','#',null)                     ]),                     new Menu('menu03','#',[                         new Menu('sub01','#',null),                         new Menu('sub02','#',null),                         new Menu('sub03','#',null),                         new Menu('sub04','#',null),                         new Menu('sub05','#',null)                     ])                 ];                 //CONTEXT_PATH 为上下文路径，一般通过脚本语言给CONTEXT_PATH变量赋值，以保证js中图片等资源的正常显示                                  MenuUtil.show(mainDivId,menus);         } window.onload=menuInit('frame'); </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

新版本菜单中的一种类型，另一种形式在下面运行代码中展示。

CSS JavaScript 实现菜单功能改进版
通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
鼠标滑过放大显示效果的列表
非常不错的当鼠标放上去以后，类别将会出现放大的一些文字和图片，适合一些tips消息框效果
2008-12-12
javascript实现表现、结构、行为分离的选项卡效果！
javascript实现表现、结构、行为分离的选项卡效果！...
2007-05-05
js iframe网站后台左右收缩型页面脚本
其实和我的后台一样网站后台免费提供这里的样式的重点是指当鼠标移到三角按钮时变成手掌
2008-07-07
js仿淘宝的拼音检索特效代码
如果需要查询数据库,自己修改成ajax调用吧,效果会很好的.
2008-08-08
js实现的非常棒的绿色下拉透明菜单
js实现的非常棒的绿色下拉透明菜单...
2007-03-03
使用html+css+js实现导航栏滚动渐变效果
这篇文章主要介绍了使用html+css+js实现导航栏滚动渐变效果,鼠标向下拖动滚动条的时候导航栏会随着拖动有一个渐变动画效果,非常的炫酷,快来学习一下如何制作吧
2023-03-03
js仿土豆视频滚动菜单
比较漂亮的仿土豆视频导航菜单，漂亮大方
2008-05-05
js兼容IE6,IE7菜单高亮显示效果代码
原来做了一个菜单在IE7下正常没想到在IE6下却没有效果，后来改成使用JS实现虽然是实现的，但总觉得不是很好，在网上找了些资料，用CSS实现了。
2008-07-07
javascript仿126邮箱TAB切换效果
仿126中的绿色tab切换效果，比较漂亮
2008-09-09