鼠标悬停滑动菜单答案

【问题标题】：Sliding menu on mouse over鼠标悬停滑动菜单
【发布时间】：2010-02-03 06:07:54
【问题描述】：

全部，

在下面的代码中

<body>
<div id="slidemenubar">
<a href="">1</a>
</div><br>
<div id="slidemenubar2">
<a href="">2</a>
</div>
</body>

鼠标悬停在超链接 3<br>,4 <br>,5 应显示在右侧（如滑动菜单）

鼠标悬停在 2 6<br>,7 应显示在滑动菜单中，新菜单应向右而不是在底部或顶部。你们中的任何一个都可以给我代码或指出示例链接这个。

谢谢........

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我想你需要的是这个链接：http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal

在链接上你可以更新网站的代码很不错。

如果打不开链接，代码如下：

<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="/default.asp">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/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p>
</body>
</html>

【讨论】：

【解决方案2】：

Horizontal Menus Frame Menu Css Menu

【讨论】：