2010-02-03 72 views
1

所有,上鼠標滑動菜單上

在下面的代碼

<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

我想你需要的是此鏈接: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> 
+0

感謝................ ......... – Hulk 2010-02-17 05:45:27