仿Windows菜单

<style type='text/css'>#menubar {
	BACKGROUND:rgb(212,208,200);
	FONT:menu;
	CURSOR:default;
	POSITION:relative
}
#menubar .root {
	BORDER-RIGHT:rgb(212,208,200) 1px solid;
	PADDING-RIGHT:2pt;
	BORDER-TOP:rgb(212,208,200) 1px solid;
	PADDING-LEFT:2pt;
	BORDER-LEFT:rgb(212,208,200) 1px solid;
	BORDER-BOTTOM:rgb(212,208,200) 1px solid
}
#menubar TABLE {
	BORDER-RIGHT:gray 2px solid;
	PADDING-RIGHT:0pt;
	BORDER-TOP:#eeeeee 2px solid;
	DISPLAY:none;
	PADDING-LEFT:0pt;
	BACKGROUND:rgb(212,208,200);
	PADDING-BOTTOM:0pt;
	MARGIN:0pt;
	FONT:menu;
	BORDER-LEFT:#eeeeee 2px solid;
	PADDING-TOP:0pt;
	BORDER-BOTTOM:gray 2px solid;
	POSITION:absolute
}
#menubar TABLE TD {
	PADDING-RIGHT:15pt;
	PADDING-LEFT:12pt;
	PADDING-BOTTOM:2pt;
	MARGIN:0pt;
	PADDING-TOP:2pt
}
#menubar .highlight {
	BACKGROUND:#08246B;
	COLOR:white;
}
#menubar .disabledhighlight {
	BACKGROUND:rgb(212,208,200);
	COLOR:gray
}
#menubar #break {
	COLOR:gray
}
#menubar .disabled {
	COLOR:gray
}
#menubar #break {
	PADDING-RIGHT:0pt;
	PADDING-LEFT:0pt;
	PADDING-BOTTOM:0pt;
	MARGIN:0pt;
	PADDING-TOP:0pt
}
#menubar SPAN.more {
	PADDING-RIGHT:0pt;
	PADDING-LEFT:0pt;
	LEFT:14pt;
	FLOAT:right;
	PADDING-BOTTOM:0pt;
	MARGIN:0pt;
	FONT:9pt webdings;
	WIDTH:0.8em;
	PADDING-TOP:0pt;
	POSITION:relative;
	TOP:-2pt;
	HEIGHT:9pt
}
#menubar .TBHandle {
	BACKGROUND-COLOR:menu;
	BORDER-LEFT:buttonhighlight 1px solid;
	BORDER-RIGHT:buttonshadow 1px solid;
	BORDER-TOP:buttonhighlight 1px solid;
	FONT-SIZE:1px;
	HEIGHT:22px;
	POSITION:absolute;
	TOP:1px;
	WIDTH:3px
}
#menubar .yToolbar {
	BACKGROUND-COLOR:menu;
	BORDER-BOTTOM:buttonshadow 1px solid;
	BORDER-LEFT:buttonhighlight 1px solid;
	BORDER-RIGHT:buttonshadow 1px solid;
	BORDER-TOP:buttonhighlight 1px solid;
	HEIGHT:27px;
	LEFT:0px;
	POSITION:relative;
	TOP:0px;
}
.handbtn {
	BACKGROUND:buttonface;
	BORDER-BOTTOM:buttonshadow 1px solid;
	BORDER-LEFT:buttonhighlight 1px solid;
	BORDER-RIGHT:buttonshadow 1px solid;
	BORDER-TOP:buttonhighlight 1px solid;
	HEIGHT:21px;
	WIDTH:3px
}
.sepbtn1 {
	BORDER-LEFT:buttonshadow 1px ridge;
	BORDER-RIGHT:buttonhighlight 1px solid;
	WIDTH: 2px
}
</style>

<script language='javascript'>
    //数组名+次序号码    
    //数组内容第一个值为标题    
    //"样式名称","字体颜色","名称","连接","目标窗口"    
    OutBarFolder1 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top");
    OutBarFolder2 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top");
    OutBarFolder3 = new Array("系统功能", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "浏览管理人员", "none", "_blank", "none", "default", "修改管理人员资料", "none", "_blank", "none", "default", "更改密码", "none", "_blank", "none", "default", "权限分配", "none", "none", "break", "default", "<hr>", "none", "none", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "none", "default", "新建管理人员", "add", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "备份数据", "none", "_top", "none", "default", "恢复数据", "none", "_top", "break", "default", "<hr>", "none", "none", "none", "default", "更改个人资料", "none", "_blank", "none", "default", "更改个人密码", "none", "_blank", "break", "default", "<hr>", "none", "none", "none", "default", "退出管理系统", "none", "_top");
    var childActive = null
    var menuActive = null
    var lastHighlight = null
    var active = false

    function getReal(el) {
        // Find a table cell element in the parent chain */          
        temp = el
        while ((temp != null) && (temp.tagName != "TABLE") && (temp.className != "root") && (temp.id != "menuBar")) {
            if (temp.tagName == "TD") 
			el = temp;
			temp = temp.parentElement
        }
        return el
    }

    function raiseMenu(el) {
        el.style.borderLeft = "1px #08246B solid"
        el.style.borderTop = "1px #08246B solid"
        el.style.borderRight = "1px #08246B solid"
        el.style.borderBottom = "1px #08246B solid"
        el.style.background = "#B5BED6"
    }

    function clearHighlight(el) {
        if (el == null) return el.style.borderRight = "1px lightgrey solid"
        el.style.borderBottom = "1px lightgrey solid"
        el.style.borderTop = "1px lightgrey solid"
        el.style.borderLeft = "1px lightgrey solid"
        el.style.background = "rgb(212,208,200)"
    }

    function sinkMenu(el) {
        el.style.borderRight = "1px #EEEEEE solid"
        el.style.borderBottom = "1px #EEEEEE solid"
        el.style.borderTop = "1px gray solid"
        el.style.borderLeft = "1px gray solid"
        el.style.background = "rgb(212,208,200)"
    }

    function menuHandler(menuItem) {
        // Write generic menu handlers here!          
        // Returning true collapses the menu. Returning false does not collapse the menu          
        return true
    }

    function getOffsetPos(which, el, tagName) {
        var pos = 0
        // el["offset" + which]          
        while (el.tagName != tagName) {
            pos += el["offset" + which];
			el = el.offsetParent;
        }
        return pos
    }

    function getRootTable(el) {
        el = el.offsetParent
        if (el.tagName == "TR") el = el.offsetParent
        return el
    }

    function getElement(el, tagName) {
        while ((el != null) && (el.tagName != tagName)) el = el.parentElement
        return el
    }

    function processClick() {
        var el = getReal(event.srcElement);
		if ((getRootTable(el).id == "menuBar") && (active)) {
            cleanupMenu(menuActive);
			clearHighlight(menuActive);
			active = false;
			lastHighlight = null;
			doHighlight(el);
        } else {
            if ((el.className == "root") || (!menuHandler(el)))
				doMenuDown(el);
            else {
                if (el._childItem == null) el._childItem = getChildren(el);
				if (el._childItem != null) return;
                if ((el.id != "break") && (el.className != "disabled") && (el.className != "disabledhighlight") && (el.className != "clear")) {
                    if (menuHandler(el)) {
                        cleanupMenu(menuActive);
						clearHighlight(menuActive);
						active = false;
						lastHighlight = null;
                    }
                }
            }
        }
    }

    function getChildren(el) {
        var tList = el.children.tags("TABLE");
		var i = 0;
        while ((i < tList.length) && (tList[i].tagName != "TABLE")) i++;
        if (i == tList.length) return null
        else return tList[i]
    }

    function doMenuDown(el) {
        if (el._childItem == null) el._childItem = getChildren(el);
        if ((el._childItem != null) && (el.className != "disabled") && (el.className != "disabledhighlight")) {
            // Performance Optimization - Cache child element            
            ch = el._childItem
            if (ch.style.display == "block") {
                removeHighlight(ch.active);
				return;
            }
            ch.style.display = "block";
            if (el.className == "root") {
                ch.style.pixelTop = el.offsetHeight + el.offsetTop + 2;
                ch.style.pixelLeft = el.offsetLeft + 1;
                if (ch.style.pixelWidth == 0) ch.style.pixelWidth = ch.rows[0].offsetWidth + 50;
                sinkMenu(el);
				active = true;
                menuActive = el;
            } else {
                childActive = el;
                ch.style.pixelTop = getOffsetPos("Top", el, "TABLE") - 3;
                // el.offsetTop + el.offsetParent.offsetTop - 3;   
                ch.style.pixelLeft = el.offsetLeft + el.offsetWidth;
                if (ch.style.pixelWidth == 0) ch.style.pixelWidth = ch.offsetWidth + 50;
            }
        }
    }

    function doHighlight(el) {
        el = getReal(el);
		if ("root" == el.className) {
            if ((menuActive != null) && (menuActive != el)) {
                clearHighlight(menuActive)
            }
            if (!active) {
                raiseMenu(el);
            } else {
				sinkMenu(el);
			}
			if ((active) && (menuActive != el)) {
                cleanupMenu(menuActive);
				doMenuDown(el);
            }
            menuActive = el;
			lastHighlight = null;
        } else {
            if (childActive != null) if (!childActive.contains(el)) closeMenu(childActive, el);
            if (("TD" == el.tagName) && ("clear" != el.className)) {
                var ch = getRootTable(el);
				if (ch.active != null) {
                    if (ch.active != el) {
                        if (ch.active.className == "disabledhighlight") ch.active.className = "disabled"
                        else ch.active.className = "";
                    }
                }
                ch.active = el;
				lastHighlight = el;
                if ((el.className == "disabled") || (el.className == "disabledhighlight") || (el.id == "break")) el.className = "disabledhighlight"
                else {
                    if (el.id != "break") {
                        el.className = "highlight"
                        if (el._childItem == null) el._childItem = getChildren(el);
                        if (el._childItem != null) {
                            doMenuDown(el)
                        }
                    }
                }
            }
        }
    }

    function removeHighlight(el) {
        if (el != null) if ((el.className == "disabled") || (el.className == "disabledhighlight")) el.className = "disabled"
        else el.className = "";
    }

    function cleanupMenu(el) {
        if (el == null) return;
		for (var i = 0; i < el.all.length; i++) {
            var item = el.all[i]
            if (item.tagName == "TABLE") item.style.display = "";
            removeHighlight(item.active);
			item.active = null;
        }
    }

    function closeMenu(ch, el) {
        var start = ch
        while (ch.className != "root") {
            ch = ch.parentElement
            if (((!ch.contains(el)) && (ch.className != "root"))) {
                start = ch
            }
        }
        cleanupMenu(start)
    }

    function checkMenu() {
        if (document.all.menuBar == null) return;
        if ((!document.all.menuBar.contains(event.srcElement)) && (menuActive != null)) {
            clearHighlight(menuActive);
            closeMenu(menuActive);
            active = false;
            menuActive = null;
            choiceActive = null;
        }
    }

    function doCheckOut() {
        var el = event.toElement;
        if ((!active) && (menuActive != null) && (!menuActive.contains(el))) {
            clearHighlight(menuActive);
            menuActive = null
        }
    }

    function processKey() {
        if (active) {
            switch (event.keyCode) {
            case 13:
                lastHighlight.click();
                break;
            case 39:
                // right               
                if ((lastHighlight == null) || (lastHighlight._childItem == null)) {
                    var idx = menuActive.cellIndex;
                    //             
                    if (idx == menuActive.offsetParent.cells.length - 2) if (idx == getElement(menuActive, "TR").cells.length - 2) idx = 0
                    else idx++;
					newItem = getElement(menuActive, "TR").cells[idx];
                } else {
                    newItem = lastHighlight._childItem.rows[0].cells[0];
                }
                doHighlight(newItem);
                break;
            case 37:
                //left               
                if ((lastHighlight == null) || (getElement(getRootTable(lastHighlight), "TR").id == "menuBar")) {
                    var idx = menuActive.cellIndex;
                    if (idx == 0) idx = getElement(menuActive, "TR").cells.length - 2;
                    else idx--;
                    newItem = getElement(menuActive, "TR").cells[idx];
                } else {
                    newItem = getElement(lastHighlight, "TR");
                    while (newItem.tagName != "TD") newItem = newItem.parentElement;
                }
                doHighlight(newItem);
                break;
            case 40:
                // down                
                if (lastHighlight == null) {
                    itemCell = menuActive._childItem;
                    curCell = 0;
                    curRow = 0;
                } else {
                    itemCell = getRootTable(lastHighlight);
                    if (lastHighlight.cellIndex == getElement(lastHighlight, "TR").cells.length - 1) {
                        curCell = 0;
                        curRow = getElement(lastHighlight, "TR").rowIndex + 1;
                        if (getElement(lastHighlight, "TR").rowIndex == itemCell.rows.length - 1) curRow = 0;
                    } else {
                        curCell = lastHighlight.cellIndex + 1;
                        curRow = getElement(lastHighlight, "TR").rowIndex;
                    }
                }
                doHighlight(itemCell.rows[curRow].cells[curCell]);
				break;
            case 38:
                // up                
                if (lastHighlight == null) {
                    itemCell = menuActive._childItem;
                    curRow = itemCell.rows.length - 1;
                    curCell = itemCell.rows[curRow].cells.length - 1;
                } else {
                    itemCell = getRootTable(lastHighlight);
                    if (lastHighlight.cellIndex == 0) {
                        curRow = getElement(lastHighlight, "TR").rowIndex - 1;
                        if (curRow == -1) curRow = itemCell.rows.length - 1;
                        curCell = itemCell.rows[curRow].cells.length - 1;
                    } else {
                        curCell = lastHighlight.cellIndex - 1;
                        curRow = getElement(lastHighlight, "TR").rowIndex;
                    }
                }
                doHighlight(itemCell.rows[curRow].cells[curCell]);
				break;
                if (lastHighlight == null) {
                    curCell = menuActive._childItem;
                    curRow = curCell.rows.length - 1
                } else {
                    curCell = getRootTable(lastHighlight);
                    if (getElement(lastHighlight, "TR").rowIndex == 0) curRow = curCell.rows.length - 1;
                    else curRow = getElement(lastHighlight, "TR").rowIndex - 1;
                }
                doHighlight(curCell.rows[curRow].cells[0]);
                break;
            }
        }
    }

    function make_menu() {
        document.write("<table width='100%' cellpadding='0' cellspacing='0' border='0' style='background=rgb(212,208,200); BACKGROUND: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid;'>");
        document.write("<tr><TD><SPAN class=handbtn></SPAN></TD><td>");
        document.write("<TABLE ID=menuBar ONSelectSTART='return false' ONCLICK='processClick()' ONMOUSEOVER='doHighlight(event.toElement)' ONMOUSEOUT='doCheckOut()' ONKEYDOWN='processKey()'><TR>");
        j = 1;
        while (eval("window.OutBarFolder" + j)) j++;
        i = 1;
        while (i < j) {
            Folder = eval("OutBarFolder" + i);
			document.write("<TD NOWRAP CLASS=root>" + Folder[0] + "<TABLE CELLSPACING=0 CELLPADDING=0>");
            MakeItems(Folder);
            document.write("</TABLE>");
            i++;
        }
        document.write("</TD></TR></TABLE>");
        document.write("</td><td width=100% ONMOUSEOVER='processClick()'></td></tr></table>");
    }

    function MakeItems(Folder) {
        var items = 0;
        while (Folder[items + 1]) items += 5;
        items /= 5;
        for (var i = 1; i < items * 5; i += 5) {
/*        if(Folder[i+1]=="BREAK") {          
		document.write("<TD NOWRAP ID=break><HR></TD>");        
		}        
		else {          
		document.write("<TR><TD NOWRAP>"+Folder[i+1]+"</TD></TR>");        
		}    
		*/
            document.write("<TR><TD NOWRAP" + ((Folder[i + 0] == "none") ? "" : " ID='" + Folder[i + 0] + "'") 
			+ ((Folder[i + 3] == "none") ? "" : " onclick=\"go(1, '"+Folder[i+3]+"')\"") + ">" 
			+ ((Folder[i + 1] == "default") ? "" : "<font color=" + Folder[i + 1] + ">") 
			+ Folder[i + 2] + ((Folder[i + 1] == "default") ? "" : "</font>") + "</TD></TR>");
            //alert("<TR><TD NOWRAP "+((Folder[i+0]=="none")?"":"ID='"+Folder[i+0]+"'")+((Folder[i+3]=="none")?"":" onclick=go(1,'"+Folder[i+3]+"')")+">"+((Folder[i+1]=="default")?"":"<font color="+Folder[i+1]+">")+Folder[i+2]+((Folder[i+1]=="default")?"":"</font>")+"</TD></TR>");      
        }
    }


    function go(i, iurl) {
        switch (i) {
        case 1:
            parent.location = iurl;
            break;
            //返回首页        
        case 2:
            top.main.location = 'login.htm';
            break;
            //登录        
        case 3:
            top.main.location = 'shenqing.htm';
            break;
            //注册        
        case 4:
            top.main.location = 'addnew.asp';
            break;
            //增加新贴        
        case 5:
            top.main.location = 'index1.asp';
            break;
            //第一页        
        case 6:
            //上一页          
            var obj = top.main
            var str = obj.location.href;
            if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("ppage").value;
            else obj.location = "index1.asp";
            break;
        case 7:
            //下一页          
            var obj = top.main
            var str = obj.location.href;
            if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("npage").value;
            else obj.location = "index1.asp";
            break;
        case 8:
            //最后一页          
            var obj = top.main
            var str = obj.location.href;
            if (str.indexOf("index1") > 0) obj.location = "index1.asp@page=" + obj.document.all("epage").value;
            else obj.location = "index1.asp";
            break;
        case 9:
            top.main.location = 'editinfo.asp';
            break;
        case 10:
            top.main.location = 'quit.asp';
            break;
        case 11:
            top.main.location = 'userinfo.asp';
            break;
        case 12:
            var newwin = top.open("../../../../waha.3322.net/default.htm");
            newwin.focus();
            break;
        }
    }
    make_menu();
</script>