|
说明: 可与IE整合、分离的导航条
效果: 运行后查看！
代码: 要完成此效果把如下代码加入到<body>区域中。
<style rel=stylesheet type=text/css>
BODY {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px;
BORDER-TOP: 0px; MARGIN: 0px; color: buttontext
}
#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>
var activeMenu = null;
var activeSub = null;
var tempEl;
var t;
var hideWindowedControls = true;
var ie5 = (document.getElementsByTagName != null);
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";
}
| 
