Sliding menu on mouse over
All,
In the following code
<body>
<div id="slidemenubar">
<a href="">1</a>
</div><br>
<div id="slidemenubar2">
<a href="">2</a>
</div>
</body>
O开发者_C百科n mouse over hyperlinks 3<br>,4 <br>,5 should be show on the right side(like sliding menu)
On mouse over 2 6<br>,7 should be shown in the sliding menu and the new menu shoud be towards right not in the bottom or top.Can any of u please give me the code or indicate an example link for this.
Thanks..............
I think what you need is on this link: http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal
On the link you can update the code that website is very nice.
If you cannot open the link, here is the code:
<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>
Horizontal Menus Frame Menu Css Menu
加载中,请稍侯......
精彩评论