Super susymenu는 상단 메뉴 탐색 메뉴를 구현합니다.

<div id="frame"></div> <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 + "\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需刷新才能执行]

该类型菜单还没有达到完美的类似开始菜单那样。
请大家积极批评指正！发表看法！