超级susymenu实现top菜单_导航菜单

来源：海亿美食网

<html> 
 <body> 
 
 
 
 </body> 
</html> 
 
/* 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 = ; 
 } 
 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:'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需刷新才能执行]
该类型菜单还没有达到完美的类似开始菜单那样。
请大家积极批评指正！发表看法！