左上角下拉導航菜單

2009-11-23 導航菜單 ℃

腳本說明:
第一步：把如下代碼加入<body>區(qū)域中
<style>#D1 {
BACKGROUND-COLOR: lightgreen;
BORDER-BOTTOM: white 2px outset;
BORDER-LEFT: white 2px outset;
BORDER-RIGHT: white 2px outset;
BORDER-TOP: white 2px outset;
LEFT: 0px; POSITION: absolute;
TOP: 0px; VISIBILITY: hidden;
WIDTH: 300px;
layer-background-color: lightgreen
}
a{font-size:9pt}
a:link{text-decoration:none}
a:hover{text-decoration:none;color:#FFFFFF}
a:visited{text-decoration:none}
.40pt{font-size:40pt;color:#3399ff;font-family:文鼎琥珀繁}
</style>
<script language="javascript">
function menuIn() //菜單隱藏
{
if(n4) {
clearTimeout(out_ID)
if( menu.top > menuH*-1+20+10 ) {
menu.top -= 8
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.top > menuH*-1+20 ) {
menu.top--
in_ID = setTimeout("menuIn()", 1)
}
}
else {
clearTimeout(out_ID)
if( menu.pixelTop > menuH*-1+20+10 ) {
menu.pixelTop -= 8
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.pixelTop > menuH*-1+20 ) {
menu.pixelTop--
in_ID = setTimeout("menuIn()", 1)
}
}
}
function menuOut() //菜單顯示
{
if(n4) {
clearTimeout(in_ID)
if( menu.top < -10) {
menu.top += 4
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.top < 0) {
menu.top++
out_ID = setTimeout("menuOut()", 1)
}
}
else {
clearTimeout(in_ID)
if( menu.pixelTop < -10) {
menu.pixelTop += 2
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.pixelTop < 0 ) {
menu.pixelTop++
out_ID = setTimeout("menuOut()", 1)
}
}
}
function fireOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}
function fireOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}
function init() {
if(n4) {
menu = document.D1
menuH = menu.document.height
menu.top = menu.document.height*-1+20
menu.onmouseover = menuOut
menu.onmouseout = menuIn
menu.visibility = "visible"
}
else if(e4) {
menu = D1.style
menuH = D1.offsetHeight
D1.style.pixelTop = D1.offsetHeight*-1+20
D1.onmouseover = fireOver
D1.onmouseout = fireOut
D1.style.visibility = "visible"
}
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
</script>
<div   class="9z79rst"   id="D1">
<table border="0" width="294">
<TBODY>
<tr>
<td align="middle" bgColor="#008000" rowSpan="2" width="14"><font color="#FFFFFF">
M
E
N
U</font></td>
<td width="127"> <ul>
<li><a href="javascript:void(0)">
選     項 1</a>
</li>
<li><a href="javascript:void(0)">
選     項 2</a>
</li>
<li><a href="javascript:void(0)">
選     項 3</a>
</li>
<li><a href="javascript:void(0)">
選     項 4</a>
</li>
<li><a href="javascript:void(0)">
選     項 5</a>
</li>
</ul>
</td>
<td width="133">
</td>
</tr>
</TBODY>
</table>
</div>
第二步：把<body>中的內容改為：
<body onload="init()" >

相關特效代碼

熱門特效代碼: 三級豎向展開/收縮導航菜單; 鼠標指向彈出菜單; jQuery 彈出菜單層; CSS二級下拉導航菜單; CSS做的垂直導航菜單效果; 橫向二級導航菜單; 仿google首頁下端圖片文字動畫導; 導航鏈接菜單間隔閃爍; 動態(tài)翻滾的導航條[酷比flash]; 純CSS的三級聯(lián)動級聯(lián)菜單

推薦特效代碼: CSS+div+js組合強大實現(xiàn)超酷菜單; 動態(tài)翻滾的導航條[酷比flash]; CSS橫向下拉菜單; 微軟風格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側隱藏的菜單