滑动菜单一例

作者：未知来源：51js.com 添加时间：2006-5-21 9:22:24

代码片段如下:

<html> <head> <title>spook-office</title> <style>#D1 { BACKGROUND-COLOR: lightgreen; 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:#3399ff;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> </head> <body onload="init()" > <div id="D1"> <table border="0" width="100%"> <TBODY> <tr> <td align="middle" bgColor="aqua" rowSpan="2"><b style="COLOR: green"> M<br> E<br> N<br> U</b></td> <td> <br><br><ul> <li><a href="javascript:void(0)"> 选  项 1</a> </li> <li><a href="javascript:void(0)"> 选  项 2</a> </li> <li><a href="javascript:void(0)"> 选  项 3</a> </li> <li><a href="javascript:void(0)"> 选  项 4</a> </li> <li><a href="javascript:void(0)"> 选  项 5</a> </li> </ul> </td> <td><br><br><ul> <li><a href="javascript:void(0)"> 选  项 6</a> </li> <li><a href="javascript:void(0)"> 选  项 7</a> </li> <li><a href="javascript:void(0)"> 选  项 8</a> </li> <li><a href="javascript:void(0)"> 选  项 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> <br><br> <br><br>鼠标移到绿色框上，菜单会滑出来。移走鼠标，菜单就自动隐藏。 </body> </html> </div>
<div class="page1">上一篇：<a href='0652620202655926.htm'>透明菜单一例</a><br />下一篇：<a href='0652620202662108.htm'>MouseOver出现滚动说明</a></div>
</div>
<div id="ad1"><div id="rlist">站内搜索</div><div id="tuijian"><form method="post" action="/edu/search.asp">
<input type="text" name="keyword" size="16"> <input type="submit" name="Submit" value="搜索">
</form>
</div><script src="/js/eduright.js" type="text/javascript"></script></div>
</div>
<script src="/foot.js" type="text/javascript"></script>
<script src="/gg/bottom.js" type="text/javascript"></script>
</body>
</html>