页面顶部菜单

脚本说明:
把如下代码加入<body>区域中
<style rel=stylesheet type=text/css>
BODY {
	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 0px
}
#menu {
	BACKGROUND: buttonface; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; CURSOR: default; LEFT: 0px; POSITION: absolute; TOP: 0px
}
#menu .menu {
	BACKGROUND: buttonface; BORDER-BOTTOM: buttonhighlight 2px outset; BORDER-LEFT: buttonhighlight 2px outset; BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; POSITION: absolute
}
#menu TD {
	FONT: menu; HEIGHT: 20px
}
#menu .root {
	BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; MARGIN: 6px; PADDING-BOTTOM: 1px; PADDING-LEFT: 7px; PADDING-RIGHT: 7px; PADDING-TOP: 1px
}
#menu .icon {
	TEXT-ALIGN: center
}
#menu .disabled {
	COLOR: buttonshadow
}
#menu .more {
	FONT-FAMILY: webdings; TEXT-ALIGN: right; WIDTH: 20px
}
#menu #handle {
	BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; CURSOR: move; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#outerDiv {
	BORDER-BOTTOM: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; HEIGHT: 90%; OVERFLOW: auto; POSITION: absolute; WIDTH: 100%; Z-INDEX: -1
}
</style>
<SCRIPT type=text/javascript>
var activeMenu = null;
var activeSub = null;
var tempEl;
var t;
var hideWindowedControls = true;

var ie5 = (document.getElementsByTagName != null);

////////////////////////////////////////////////////////
//If you wan't different colors than default overload these functions...
function menuItemHighlight(el) {
	el.style.background = "highlight";
	el.style.color = "highlighttext";
}

function menuItemNormal(el) {
	el.style.background = "";
	el.style.color = "";
}

function raiseButton(el) {
	el.style.borderTop ="1 solid buttonhighlight";
	el.style.borderLeft ="1 solid buttonhighlight";
	el.style.borderBottom ="1 solid buttonshadow";
	el.style.borderRight ="1 solid buttonshadow";
	el.style.padding ="1";
	el.style.paddingLeft = "7";
	el.style.paddingRight = "7";
}

function normalButton(el) {
	el.style.border = "1 solid buttonface";
	el.style.padding ="1";
	el.style.paddingLeft = "7";
	el.style.paddingRight = "7";
}

function pressedButton(el) {
	el.style.borderTop ="1 solid buttonshadow";
	el.style.paddingTop = "2";
	el.style.borderLeft ="1 solid buttonshadow";
	el.style.paddingLeft = "8";
	el.style.borderBottom ="1 solid buttonhighlight";
	el.style.paddingBottom= "0";
	el.style.borderRight = "1 solid buttonhighlight";
	el.style.paddingRight = "6";
}
//...untill here
////////////////////////////////////////////////////////

function getMenuItem(el) {
	temp = el;
	while ((temp!=null) && (temp.tagName!="TABLE") && (temp.id!="menubar") && (temp.id!="menu") && (temp.id!="handle")) {
		if ((temp.tagName=="TR") || (temp.className=="root"))
			el = temp;
		temp = temp.parentElement;
	}
	return el;
}

function getSub(el) {
	temp = el;
	while ((temp!=null) && (temp.className != "sub")) {
		if (temp.tagName=="TABLE")
			el = temp;
		temp = temp.parentElement;
	}
	return el;
}

////////////////////////////////////////////////////////
// Used to hide the menu when clicked elsewhere
function Restore() {
	if (activeMenu) {
		toggleMenu(activeMenu.parentElement);
		cleanUpMenuBar();
	}
}

document.onclick=Restore;
////////////////////////////////////////////////////////

}

function toggleMenu(el) {
	if (el.menu == null)
		el.menu = getChildren(el);
	if (el.menu == activeMenu) {
		if (activeSub)
			menuItemNormal(activeSub.parentElement.parentElement);
		cleanup(el.menu,true);
		activeMenu = null;
		activeSub = null;
//		showWindowedObjects(true);
	}
	else {
		if (activeMenu) {
			cleanup(activeMenu,true);
			hideMenu(activeMenu);
		}
		
		activeMenu = el.menu;

var tPos = topPos(el.menu) + menu.offsetHeight;

if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight) {
			el.menu.style.pixelTop = (ie5) ? el.offsetHeight + 1
										   : menu.offsetHeight - el.offsetTop - 2;
			dir = 2;
		}
		else {
			el.menu.style.pixelTop = (ie5) ? el.offsetTop - el.menu.offsetHeight - 1
										   : el.offsetTop - el.menu.offsetHeight + 2;
			dir = 8;
		}
			
		el.menu.style.pixelLeft = (ie5) ? el.offsetLeft - 2 : el.offsetLeft;
		show(el.menu, dir);
		showWindowedObjects(false);
	}
}

function showSubMenu(el,show) {
	var dir = 2;
	temp = el;
	list = el.children.tags("TD");
	el = list[list.length-1];
	if (el.menu == null)
		el.menu = getChildren(el);
	temp.subMenu = el.menu;
	if ((el.menu != activeMenu) && (show)) {
		activeSub = el.menu;

var lPos = leftPos(el.menu);
		if ((document.body.offsetWidth - lPos)  >= el.menu.offsetWidth) {
			el.menu.style.left = (ie5) ? el.parentNode.offsetWidth
									   : el.offsetParent.offsetWidth;
			dir = 6;
		}
		else {
			el.menu.style.left = - el.menu.offsetWidth + 3;
			dir = 4;
		}

var tPos = (ie5) ? topPos(el.menu) + el.offsetTop
						 : topPos(el.menu) + el.offsetParent.offsetTop;// + el.menu.offsetTop;

if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight)
			el.menu.style.top =  (ie5) ? el.offsetTop - 4
									   : el.offsetParent.offsetTop - 2;
		else
			el.menu.style.top =  (ie5) ? el.offsetTop + el.offsetHeight - el.menu.offsetHeight
									   : el.offsetParent.offsetTop + el.offsetParent.offsetHeight - el.menu.offsetHeight + 2;
		showSub(el.menu, dir);
	}
	else {
		show(el.menu ,dir);
		activeSub = null;
	}
}

////////////////////////////////////////////////////////
//The following two functions are needed to calculate the position
function topPos(el) {
	var temp = el;
	var y = 0;
	while (temp.id!="menu") {
		temp = temp.offsetParent;
		y += temp.offsetTop;
	}
	return y;
}

function leftPos(el) {
	var temp = el;
	var x = 0;
	while (temp.id!="menu") {
		temp = temp.offsetParent;
		x += temp.offsetLeft;
	}
	return x + el.offsetParent.offsetWidth;
}
////////////////////////////////////////////////////////

function show(el, dir) {
	if (typeof(fade) == "function")
		fade(el, true);
	else if (typeof(swipe) == "function") {
		tempElSwipe = el;
		tempDirSwipe = dir;
		el.style.visibility = "visible";
		el.style.visibility = "hidden";
		window.setTimeout("tempSwipe()", 0);
//		swipe(el, dir);
	}
	else
		el.style.visibility = "visible";
}

var tempElSwipe, tempDirSwipe;

function tempSwipe() {
	swipe(tempElSwipe, tempDirSwipe);
}

function showSub(el ,dir) {
	show(el, dir);
//	swipe(el, dir);
//	fade(el, true);
//	el.style.visibility = "visible";
}

}

function getChildren(el) {
	var tList = el.children.tags("TABLE");
	return tList[0];
}

/////////////////////////////////////////////////////////////////////////////
// The rest is just for the moving/docking
var dragObject = null;
var dragObjectPos = "top";
var tx;
var ty;

/////////////////////////////////////////////////////////////////////////////
// Fixing sizes and positions
window.onload=fixSize;
window.onresize=fixSize;

function document.onmousedown() {
	if(window.event.srcElement.id == "handle") {
		dragObject = document.all[window.event.srcElement.getAttribute("for")];
		Restore();	//Hide the menus while moving
		ty = (window.event.clientY - dragObject.style.pixelTop);
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else {
		dragObject = null;
	}	
}

function document.onmouseup() {
	if(dragObject) {
		dragObject = null;
	}
}

function document.onmousemove() {
	if(dragObject) {
		if(window.event.clientX >= 0) {
			if((window.event.clientY - ty) <= 15) {
				dragObject.style.border = "0 solid buttonface";
				dragObject.style.width = "100%";
				dragObject.style.top = 0;
				dragObject.style.left = 0;
				dragObjectPos = "top";
				fixSize();
			}
			else if ((window.event.clientY - ty) >= document.body.clientHeight - menu.offsetHeight - 15) {
				dragObject.style.border = "0 solid buttonface";
				dragObject.style.width = "100%";
				dragObject.style.top = document.body.clientHeight - menu.offsetHeight;
				dragObject.style.left = 0;
				dragObjectPos="bottom";
				fixSize();
			}
			else {
				dragObject.style.width = "10px";	
				dragObject.style.left = window.event.clientX;
				dragObject.style.top = window.event.clientY - ty;
				dragObject.style.border = "2px outset white";
				dragObjectPos = "float";
				fixSize();
			}
		}
		else {
			dragObject.style.border = "";
			dragObject.style.left = "0";
			dragObject.style.top = "0";
		}
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}

//This function si used for hiding windowed controls because they interfere with the menus
function showWindowedObjects(show) {
	if (hideWindowedControls) {
		var windowedObjectTags = new Array("SELECT", "IFRAME", "OBJECT", "APPLET","EMBED");
		var windowedObjects = new Array();
		var j=0;
	
		for (var i=0; i<windowedObjectTags.length; i++) {
			var tmpTags = document.all.tags(windowedObjectTags[i]);
			
			if (tmpTags.length > 0) {
				for (var k=0; k<tmpTags.length; k++) {
					windowedObjects[j++] = tmpTags[k];
				}
			}
		}
	
		for (var i=0; i<windowedObjects.length; i++) {
			if (!show)
				windowedObjects[i].visBackup = (windowedObjects[i].style.visibility == null) ? "visible" : windowedObjects[i].style.visibility;
			windowedObjects[i].style.visibility = (show) ? windowedObjects[i].visBackup : "hidden";
		}
	}
}

</SCRIPT>

<TABLE cellSpacing=1 id=menu onclick=menuClick() onmouseout=menuOut() 
onmouseover=menuOver() onselectstart="return false">
  <TBODY>
  <TR id=menubar>
    <TD class=disabled style="PADDING-LEFT: 0px; PADDING-RIGHT: 1px">
      <DIV class=disabled id=handle style="HEIGHT: 100%; LEFT: 3px; WIDTH: 3px" 
      title="Move me!" for="menu"></DIV></TD>
    <TD class=root>Demo 
      <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
        <TBODY>
        <TR href="javascript:alert('这里可以改成一个链接!')">
          <TD><IMG height=17 src="home.gif" width=16></TD>
          <TD noWrap>You can use icons</TD>
          <TD></TD></TR>
        <TR class=disabled>
          <TD></TD>
          <TD noWrap>Disabled menuItems</TD>
          <TD></TD></TR>
        <TR class=sub>
          <TD></TD>
          <TD noWrap>Use sub menus</TD>
          <TD><SPAN class=more>4</SPAN> 
            <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
              <TBODY>
              <TR href="javascript:alert('这里可以改成一个链接')">
                <TD noWrap style="HEIGHT: 20px">Inside a sub 
            menu</TD></TR></TBODY></TABLE></TD></TR>
        <TR class=disabled>
          <TD colSpan=3>
            <HR>
          </TD></TR>
        <TR 
        href="javascript:alert('这里可以改成一个链接')">
          <TD></TD>
          <TD>Use separators</TD>
          <TD></TD></TR>
        <TR title="This is really easy">
          <TD></TD>
          <TD>Use tool tip</TD>
          <TD></TD></TR></TBODY></TABLE></TD>
    <TD class=root>Help 
      <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
        <TBODY>
        <TR class=sub>
          <TD><SPAN style="WIDTH: 20px"> </SPAN></TD>
          <TD>About</TD>
          <TD><SPAN class=more>4</SPAN> 
            <TABLE cellSpacing=0 class=menu 
            style="BACKGROUND: black; VISIBILITY: hidden">
              <TBODY>
              <TR class=disabled title="">
                <TD>
                  <DIV 
                  style="BACKGROUND: black; COLOR: white; FONT-FAMILY: verdana; FONT-SIZE: 12px; MARGIN: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; WIDTH: 200px">
                  <P style="MARGIN: 5px">站长<SPAN 
                  style="COLOR: tomato; FONT-WEIGHT: bold">AKEN</SPAN> 
                欢迎你的光临<A href="mailto:xjl906@163.com" 
                  style="COLOR: white">Aken</A>.</P>
                                   <P 
                  style="BACKGROUND: beige; COLOR: red; FONT-SIZE: 9px; MARGIN: 10px">这个菜单只适用与IE4.0或更高版本</P>
                  <P 
                  onclick="bugs.style.display=(bugs.style.display=='')?'none':'';" 
                  style="CURSOR: hand; TEXT-DECORATION: underline">欢迎再次光临!</P>
                  <P id=bugs 
                  style="DISPLAY: none; MARGIN-LEFT: 20px; MARGIN-TOP: -5px">www.591sc.com<BR>是最大的中文javascript站点<BR>并且每日更新，你一定不可错过 </P>
                  <HR style="COLOR: deepskyblue">