首頁(yè)網(wǎng)頁(yè)特效庫(kù)

首頁(yè) > 特效 > 導(dǎo)航菜單 > 正文

鼠標(biāo)指向彈出菜單

2011-09-29 導(dǎo)航菜單 ℃

第一步：把如下代碼加入到<head>區(qū)域中

<style>#D1 {
	BACKGROUND-COLOR: blue; 
	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:#ub39a1;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>

第二步：把如下代碼加入到<body>區(qū)域中
<body onload="init()">
<div   class="cjhtbsf"   id="D1">

<table border="0" width="100%">
<TBODY>
  <tr>
    <td align="middle" bgColor="ub39a1" rowSpan="2"><b style="COLOR: ub39a1">
    M<br>
    E<br>
    N<br>
    U</b></td>
    <td> <br><br><ul>
      <li><a href="link.htm">
          選     項(xiàng) 1</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 2</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 3</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 4</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 5</a> 
      </li>
    </ul>
    </td>
    <td><br><br><ul>
      <li><a href="link.htm">
          選     項(xiàng) 6</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 7</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 8</a> 
      </li>
      <li><a href="link.htm">
          選     項(xiàng) 9</a> 
      </li>
      <li><a href="javascript:void(0)">
          選     項(xiàng) 10</a>
      </li>
    </ul>
    </td>
  </tr>
  <tr>
    <td align="right" colSpan="2">
     </td>
  </tr>
</TBODY>
</table>
</div>

相關(guān)特效代碼: 導(dǎo)航鏈接菜單間隔閃爍09/29; 選擇單選框彈出文本內(nèi)容09/29; 滾動(dòng)鼠標(biāo)滾輪控制圖片大小07/18; 鼠標(biāo)經(jīng)過圖片變大05/30; 點(diǎn)擊彈出窗口層背景變暗05/19; 三級(jí)豎向展開/收縮導(dǎo)航菜單05/16; 可以用鼠標(biāo)拖動(dòng)的圖片層特效03/31; 鼠標(biāo)移動(dòng)到圖片上圖片漸漸變清晰移開漸漸模糊03/31; 點(diǎn)擊按鈕淡入淡出彈出圖文信息03/31; 鼠標(biāo)移到圖片上圖片由無色變?yōu)橛猩?/a>03/28

熱門特效代碼

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

<span id="hpi3n"></span>