<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态菜单</title>
<style type="text/css">
#menu{
position:absolute;
//left:-px;
width:180px;
background-color:#33FFFF;
text-align:center;
border:1px solid #000;
}#menu td{
border:1px solid #000;
}
#menu td a{
display:block;
text-decoration:none;
line-height:25px;
}
#menu td a:hover{
background-color:red;
}
</style>
<script type="text/javascript">
var timeid1;
var timeid2;
function over(){
var tablenode=document.getElementById("menu");
if(parseFloat(tablenode.style.left)<0){
clearTimeout(timeid2);
tablenode.style.left=parseFloat(tablenode.style.left)+5+"px";
timeid1=setTimeout("over()",50);
}
}
function out(){
var tablenode=document.getElementById("menu");
if(parseFloat(tablenode.style.left)>-140){
clearTimeout(timeid1);
tablenode.style.left=parseFloat(tablenode.style.left)-5+"px";
timeid2=setTimeout("out()",50);
}
}
function init()
{
document.getElementById("menu").style.left="-140px";
}
</script>
</head>
<body οnlοad="init()">
<table id="menu" border="0" cellspacing="0" cellpadding="0" οnmοuseοver="over()" οnmοuseοut="out()">
<tr><td><a href="#">首页</a></td><td rowspan="6">菜单</td></tr>
<tr><td><a href="#">HTML入门</a></td></tr>
<tr><td><a href="#">HTML入门</a></td></tr>
<tr><td><a href="#">HTML入门</a></td></tr>
<tr><td><a href="#">HTML入门</a></td></tr>
</table>
</body>
</html>
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
