zoukankan      html  css  js  c++  java
  • 网页顶部隐藏css菜单代码

    代码简介:

    隐藏在顶部的菜单,类似QQ最小化时的窗口一样,浮动在屏幕的最上方,鼠标放上去会自动展开,这是基本的实现步骤,如果喜欢的话,颜色什么的你自己改一下。

    代码内容:

    <html>
    <head>
    <title>网页顶部隐藏css菜单代码_网页代码站(www.webdm.cn)</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=null
    n4 = (document.layers)?1:0
    e4 = (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><a href="http://webdm.cn">
              ASP源代码</a> 
          </li>
          <li><a href="http://webdm.cn">
              PHP源代码</a> 
          </li>
          <li><a href="http://webdm.cn">
             JSP源代码</a> 
          </li>
          <li><a href="http://webdm.cn">
              VC源代码</a> 
          </li>
          <li><a href="http://webdm.cn">
              AJAX源代码</a> 
          </li>
        </ul>
        </td>
        <td>
    
    <ul>
          <li><a href="http://webdm.cn">
              新闻文章</a> 
          </li>
          <li><a href="http://webdm.cn">
              论坛社区</a> 
          </li>
          <li><a href="http://webdm.cn">
              聊天留言</a> 
          </li>
          <li><a href="http://webdm.cn">
              CMS建站</a> 
          </li>
          <li><a href="javascript:void(0)">
              人才房产</a>
          </li>
        </ul>
        </td>
      </tr>
      <tr>
        <td align="right" colSpan="2">
         </td>
      </tr>
    </TBODY>
    </table>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/e98fa39d-b3fd-4120-be1e-2d1d540b9d55.html

  • 相关阅读:
    根正苗红_百度百科
    会员
    阴阳屏_百度百科
    腹黑正太_百度百科
    创享派-互联网创业者社区
    TF-IDF与余弦相似性的应用(一):自动提取关键词
    跑过三关六码头,吃过奉化芋艿头里的三关六码头是什么?_百度知道
    梁周洋_百度百科
    PClady专访中国第一名媛、元媛舞会总裁周采茨女士【图】_摩登前沿 _奢品 _太平洋时尚网
    AV_百度百科
  • 原文地址:https://www.cnblogs.com/webdm/p/2019723.html
Copyright © 2011-2022 走看看