页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 导航菜单 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

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