W3Schools 在线编辑工具 V3.0

<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">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr>
</table>

<p>请把鼠标移动到 MENU，可以显示这个菜单。</p>
<p>可以尝试修改脚本中的 "speed" 变量，来改变菜单的滑动速度。</p>
</body>
</html>

W3Schools 在线编辑工具（TIY） V3.0