多级下拉菜单

<HTML>

<head>

<title>多级下拉菜单</title>

var isDOM = (document.getElementById ? true : false);

var isIE4 = ((document.all && !isDOM) ? true : false);

var isNS4 = (document.layers ? true : false);

var popTimer = 0;

var litNow = new Array();

function getRef(id) {

if (isDOM) return document.getElementById(id);

if (isIE4) return document.all[id];

if (isNS4) return document.layers[id];

}

function getSty(id) {

return (isNS4 ? getRef(id) : getRef(id).style);

}

function popOver(menuNum, itemNum) {

clearTimeout(popTimer);

hideAllBut(menuNum);

litNow = getTree(menuNum, itemNum);

changeCol(litNow, true);

targetNum = menu[menuNum][itemNum].target;

if (targetNum > 0) {

thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);

thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);

with (menu[targetNum][0].ref) {

left = parseInt(thisX + menu[targetNum][0].x);

top = parseInt(thisY + menu[targetNum][0].y);

visibility = \'visible\';

}

function popOut(menuNum, itemNum) {

if ((menuNum == 0) && !menu[menuNum][itemNum].target)

hideAllBut(0)

else

popTimer = setTimeout(\'hideAllBut(0)\', 500);

}

function getTree(menuNum, itemNum) {

itemArray = new Array(menu.length);

while(1) {

itemArray[menuNum] = itemNum;

if (menuNum == 0) return itemArray;

itemNum = menu[menuNum][0].parentItem;

menuNum = menu[menuNum][0].parentMenu;

}

function changeCol(changeArray, isOver) {

for (menuCount = 0; menuCount < changeArray.length; menuCount++) {

if (changeArray[menuCount]) {

newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

with (menu[menuCount][changeArray[menuCount]].ref) {

if (isNS4) bgColor = newCol;

else backgroundColor = newCol;

}

function hideAllBut(menuNum) {

var keepMenus = getTree(menuNum, 1);

for (count = 0; count < menu.length; count++)

if (!keepMenus[count])

menu[count][0].ref.visibility = \'hidden\';

changeCol(litNow, false);

}

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {

this.isVert = isVert;

this.popInd = popInd

this.x = x;

this.y = y;

this.width = width;

this.overCol = overCol;

this.backCol = backCol;

this.borderClass = borderClass;

this.textClass = textClass;

this.parentMenu = null;

this.parentItem = null;

this.ref = null;

}

function Item(text, href, frame, length, spacing, target) {

this.text = text;

this.href = href;

this.frame = frame;

this.length = length;

this.spacing = spacing;

this.target = target;

this.ref = null;

}

function writeMenus() {

if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {

var str = \'\', itemX = 0, itemY = 0;

for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {

var itemID = \'menu\' + currMenu + \'item\' + currItem;

var w = (isVert ? width : length);

var h = (isVert ? length : width);

if (isDOM || isIE4) {

str += \'<div id="\' + itemID + \'" style="position: absolute; left: \' + itemX + \'; top: \' + itemY + \'; width: \' + w + \'; height: \' + h + \'; visibility: inherit; \';

if (backCol) str += \'background: \' + backCol + \'; \';

str += \'" \';

}

if (isNS4) {

str += \'<layer id="\' + itemID + \'" left="\' + itemX + \'" top="\' + itemY + \'" width="\' + w + \'" height="\' + h + \'" visibility="inherit" \';

if (backCol) str += \'bgcolor="\' + backCol + \'" \';

}

if (borderClass) str += \'class="\' + borderClass + \'" \';

str += \'onMouseOver="popOver(\' + currMenu + \',\' + currItem + \')" onMouseOut="popOut(\' + currMenu + \',\' + currItem + \')">\';

str += \'<table width="\' + (w - 8) + \'" border="0" cellspacing="0" cellpadding="\' + (!isNS4 && borderClass ? 3 : 0) + \'"><tr><td align="left" height="\' + (h - 7) + \'">\' + \'<a class="\' + textClass + \'" href="\' + href + \'"\' + (frame ? \' target="\' + frame + \'">\' : \'>\') + text + \'</a></td>\';

if (target > 0) {

menu[target][0].parentMenu = currMenu;

menu[target][0].parentItem = currItem;

if (popInd) str += \'<td class="\' + textClass + \'" align="right">\' + popInd + \'</td>\';

}

str += \'</tr></table>\' + (isNS4 ? \'</layer>\' : \'</div>\');

if (isVert) itemY += length + spacing;

else itemX += length + spacing;

}

if (isDOM) {

var newDiv = document.createElement(\'div\');

document.getElementsByTagName(\'body\').item(0).appendChild(newDiv);

newDiv.innerHTML = str;

ref = newDiv.style;

ref.position = \'absolute\';

ref.visibility = \'hidden\';

}

if (isIE4) {

document.body.insertAdjacentHTML(\'beforeEnd\', \'<div id="menu\' + currMenu + \'div" \' + \'style="position: absolute; visibility: hidden">\' + str + \'</div>\');

ref = getSty(\'menu\' + currMenu + \'div\');

}

if (isNS4) {

ref = new Layer(0);

ref.document.write(str);

ref.document.close();

}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {

itemName = \'menu\' + currMenu + \'item\' + currItem;

if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);

if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];

}

with(menu[0][0]) {

ref.left = x;

ref.top = y;

ref.visibility = \'visible\';

}

var menu = new Array();

var defOver = \'#336699\', defBack = \'#003366\';

var defLength = 22;

menu[0] = new Array();

menu[0][0] = new Menu(false, \'\', 5, 0, 17, \'#669999\', \'#006666\', \'\', \'itemText\');

menu[0][1] = new Item(\'File\', \'#\', \'\', 40, 10, 1);

menu[0][2] = new Item(\'Edit\', \'#\', \'\', 40, 10, 2);

menu[0][3] = new Item(\'Help\', \'#\', \'\', 40, 10, 3);

menu[0][4] = new Item(\'Site\', \'http://www.jojoo.net\', \'_new\', 40, 10, 6);

menu[0][5] = new Item(\'Other\', \'http://www.jojoo.net\', \'_new\', 40, 10, 8);

menu[1] = new Array();

menu[1][0] = new Menu(true, \'>\', 0, 22, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[1][1] = new Item(\'Open\', \'#\', \'\', defLength, 0, 0);

menu[1][2] = new Item(\'Save\', \'#\', \'\', defLength, 0, 0);

menu[1][3] = new Item(\'Reopen\', \'#\', \'\', defLength, 0, 4);

menu[1][4] = new Item(\'Exit\', \'#\', \'\', defLength, 0, 0);

menu[2] = new Array();

menu[2][0] = new Menu(true, \'>\', 0, 22, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[2][1] = new Item(\'Cut\', \'#\', \'\', defLength, 0, 0);

menu[2][2] = new Item(\'Copy\', \'#\', \'\', defLength, 0, 0);

menu[2][3] = new Item(\'Paste\', \'#\', \'\', defLength, 0, 0);

menu[3] = new Array();

menu[3][0] = new Menu(true, \'<\', 0, 22, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[3][1] = new Item(\'Contents\', \'#\', \'\', defLength, 0, 0);

menu[3][2] = new Item(\'Index\', \'#\', \'\', defLength, 0, 0);

menu[3][3] = new Item(\'About\', \'#\', \'\', defLength, 0, 5);

menu[4] = new Array();

menu[4][0] = new Menu(true, \'>\', 80, 0, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[4][1] = new Item(\'site1\', \'#\', \'\', defLength, 0, 0);

menu[4][2] = new Item(\'site2\', \'#\', \'\', defLength, 0, 0);

menu[4][3] = new Item(\'site3\', \'#\', \'\', defLength, 0, 0);

menu[5] = new Array();

menu[5][0] = new Menu(true, \'>\', -85, -17, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[5][1] = new Item(\'Leftwards!<br>And up!\', \'#\', \'\', 40, 0, 0);

menu[6] = new Array();

menu[6][0] = new Menu(true, \'>\', 0, 22, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[6][1] = new Item(\'site1\', \'#\', \'\', defLength, 0, 0);

menu[6][2] = new Item(\'site2\', \'#\', \'\', defLength, 0, 7);

menu[6][3] = new Item(\'site3\', \'#\', \'\', defLength, 0, 0);

menu[7] = new Array();

menu[7][0] = new Menu(true, \'>\', 80, 0, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[7][1] = new Item(\'site21\', \'#\', \'\', defLength, 0, 0);

menu[7][2] = new Item(\'site22\', \'#\', \'\', defLength, 0, 0);

menu[7][3] = new Item(\'site23\', \'#\', \'\', defLength, 0, 0);

menu[8] = new Array();

menu[8][0] = new Menu(true, \'>\', 0, 22, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[8][1] = new Item(\'other1\', \'#\', \'\', defLength, 0, 0);

menu[8][2] = new Item(\'other2\', \'#\', \'\', defLength, 0, 0);

menu[8][3] = new Item(\'other3\', \'#\', \'\', defLength, 0, 9);

menu[9] = new Array();

menu[9][0] = new Menu(true, \'>\', 80, 0, 80, defOver, defBack, \'itemBorder\', \'itemText\');

menu[9][1] = new Item(\'other1\', \'#\', \'\', defLength, 0, 0);

menu[9][2] = new Item(\'other2\', \'#\', \'\', defLength, 0, 0);

menu[9][3] = new Item(\'other3\', \'#\', \'\', defLength, 0, 0);

var popOldWidth = window.innerWidth;

nsResizeHandler = new Function(\'if (popOldWidth != window.innerWidth) location.reload()\');

if (isNS4) document.captureEvents(Event.CLICK);

document.onclick = clickHandle;

function clickHandle(evt){

if (isNS4) document.routeEvent(evt);

hideAllBut(0);

}

function moveRoot(){

with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);

}

// End -->

</script>

<style>

<!--

.itemBorder { border: 1px solid black }

.itemText { text-decoration: none; color: #FFFFFF; font: 12px Tahoma,Arial, Helvetica }

.crazyBorder { border: 2px outset #663399 }

.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Tahoma,Arial, Helvetica }

-->

</style>

</head>

<tr>

</td>

</tr>

</table>

</body>

</HTML>