W3School TIY
编辑您的代码:
<html> <head> <style> body{font-family:arial;} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.nav { background:black; position:relative; font: bold 80% arial; top:0px; left:-135px; } </style> <script type="text/javascript"> var i=-135 var intHide var speed=3 function showmenu() { clearInterval(intHide) intShow=setInterval("show()",10) } function hidemenu() { clearInterval(intShow) intHide=setInterval("hide()",10) } function show() { if (i<-12) { i=i+speed document.getElementById('myMenu').style.left=i } } function hide() { if (i>-135) { i=i-speed document.getElementById('myMenu').style.left=i } } </script> </head> <body> <table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"> <tr><td class="menu"><a href="../index.html" >HOME</a></td> <td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr> <tr><td class="menu"><a href="../asp/index.asp.htm" >ASP</a></td></tr> <tr><td class="menu"><a href="../js/index.asp.htm" >JavaScript</a></td></tr> <tr><td class="menu"><a href="../dhtml/index.asp.htm" >DHTML</a></td></tr> <tr><td class="menu"><a href="../vbscript/index.asp.htm" >VBScript</a></td></tr> </table> <p>请把鼠标移动到 MENU,可以显示这个菜单。</p> <p>可以尝试修改脚本中的 "speed" 变量,来改变菜单的滑动速度。</p> </body> </html>
查看结果: