超级susymenu实现top菜单

<html> <body></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）+30; 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 + "
" + "Error: " + message + "
" + "Error Type : " + EXCEPTION_INFO[name] + "
" + "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"）; elsethis.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"）; elsethis.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"）; elsethis.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）; elsesetCookie（"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"）; elsethis.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"）; elsethis.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"）; elsethis.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:"1", 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需刷新才能执行]
该类型菜单还没有达到完美的类似开始菜单那样。
请大家积极批评指正！发表看法！