CSS頂部隱藏菜單

2024-09-05 12:19:20

字體：大中小

來源：轉載

供稿：網友

隱藏在頂部的菜單，類似QQ最小化時的窗口一樣，浮動在屏幕的最上方，鼠標放上去會自動展開，這是基本的實現步驟，如果喜歡的話，顏色什么的你自己改一下。

<html><head><title>頂部隱藏菜單</title><style>#D1 {    BACKGROUND-COLOR: skyblue;     BORDER: white 2px outset;     LEFT: 0px; POSITION: absolute;     TOP: 0px; VISIBILITY: hidden;     WIDTH: 298px;     layer-background-color: lightgreen}a{font-size:9pt}a:link{text-decoration:none}a:hover{text-decoration:none;color:yellow}a:visited{text-decoration:none}.40pt{font-size:40pt;color:#FFF;}</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=nulln4 = (document.layers)?1:0e4 = (document.all)?1:0;</script></head><body onload="init()"><br>鼠標放到藍色上面試試。<div   class="xdvbtdb"   id="D1"><table border="0" width="100%"><TBODY>  <tr>    <td align="middle" bgColor="0066CC" rowSpan="2"><b>Menu</b></td>    <td> <ul>      <li>          ASP源代碼       </li>      <li>          PHP源代碼       </li>      <li>         JSP源代碼       </li>      <li>          VC源代碼       </li>      <li>          AJAX源代碼       </li>    </ul>    </td>    <td><ul>      <li>          新聞文章       </li>      <li>          論壇社區       </li>      <li>          聊天留言       </li>      <li>          CMS建站       </li>      <li>          人才房產      </li>    </ul>    </td>  </tr>  <tr>    <td align="right" colSpan="2">     </td>  </tr></TBODY></table></div></body></html>

上一篇：左側豎向選項卡TAB

下一篇：JS折疊菜單