鼠标滑过菜单
[英]Sliding menu on mouse over
问题描述
所有，
在以下代码中
<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应显示在滑动菜单中，新菜单应朝向右侧，而不是在底部或顶部。可以给我任何代码或指示示例链接。
谢谢..............
2 个解决方案
解决方案2
2 已采纳 2010-02-16 23:57:07
我想你需要的是这个链接： 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>
鼠标后菜单滑动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.