发布您的源码作品！会员登录/控制面版

菜单平时隐藏着，鼠标移到特定地方就会显现 (像oicq)

作者：佚名来源：不详发布时间：2006-10-29 0:23:40 发布人：admin

要完成此效果需要三个步骤

第一步：把如下代码加入到<head>区域中

<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>区域中

<div 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">
          选     项 1</a> 
      </li>
      <li><a href="link.htm">
          选     项 2</a> 
      </li>
      <li><a href="link.htm">
          选     项 3</a> 
      </li>
      <li><a href="link.htm">
          选     项 4</a> 
      </li>
      <li><a href="link.htm">
          选     项 5</a> 
      </li>
    </ul>
    </td>
    <td><br><br><ul>
      <li><a href="link.htm">
          选     项 6</a> 
      </li>
      <li><a href="link.htm">
          选     项 7</a> 
      </li>
      <li><a href="link.htm">
          选     项 8</a> 
      </li>
      <li><a href="link.htm">
          选     项 9</a> 
      </li>
      <li><a href="javascript:void(0)">
          选     项 10</a>
      </li>
    </ul>
    </td>
  </tr>
  <tr>
    <td align="right" colSpan="2">
     </td>
  </tr>
</TBODY>
</table>
</div>

第三步：把“onload="init()"”加在<body>标记里
例如：<body onload="init()"

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：一个非常不错的左键弹出菜单。就象WINDOW的右键属性。。

下一篇代码：相当酷的导航窗哟

精品推荐

阅读排行

· 自己动手输入网页背景颜色代码
· 随机数字生成器
· 礼花背景(一个非常经典的网页背景）
· 鼠标经过文字变色
· 倒计时代码生成器
· [图文] 代码实现生成弹出窗口的特效
· [图文] 星星满天闪烁的背景
· 颜色英文代码全集
· 速度练习　测试你打字的速度
· 爱情游戏测试

相关代码

· dojo组件滑动菜单和用cookie设置selected的问题
· 求高手帮忙修改一下代码，关于下来菜单的问题
· [求助]下拉菜单的内容怎么存入数据库，主要代码是..
· 哪个高手给帮帮忙编辑个下拉式菜单啊
· php?二级级联菜单，select option 的删除和添加
· dreamweaver 8 怎么制作折叠菜单？
· C控制台菜单
· 点击按钮进入弹出的新无菜单的页面~~
· 一个QQ菜单编辑器！
· COOL菜单