• 网页顶部隐藏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

  • 相关阅读:
    最短路径 一 Dijkstra 模板(O(n^2))
    【转】STL中的set容器的一点总结
    水题 等差数列HDU 5400 Arithmetic Sequence
    贪心+等价转化 HDU 1489
    POJ 3258 最小值最大化 二分搜索
    【转】二分查找算法学习札记
    UVa 714 Copying books 贪心+二分 最大值最小化
    湖南程序设计竞赛赛题总结 XTU 1237 Magic Triangle(计算几何)
    并查集基础 模板题 hdu1232 畅通工程
    数论 最简分数 Farey序列求最简分数+POJ3374
  • 原文地址:https://www.cnblogs.com/webdm/p/2019723.html
Copyright © 2020-2023  润新知