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 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折叠菜单