Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Hi,
Does any one know how to make a mouse over drop down menu by JavaScript ?
Please have a look at:
www.national.com.au
for further example. I need to design a nav menu like the one in that site but got a bit of trouble to start. A little example will be a great help,
Best regards,
Hi, I've found the javascript code, copy and past it.
body{font-family:verdana;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:red}
td.menu{background:yellow}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}something
something
something
hi
bye
Or visit Dynamic Drive, and search for top menu's, most script's are for all internet browsers, and Netscape 6.Greetz from the Netherlands
Jaap
0 
Sorry something went wrong with the script-code. I'll give it another go asap. First some testing...
<html>
<body>
<style>
body{font-family:verdana;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:red}
td.menu{background:yellow}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
0
Response #2 looks better, now just a little more testing...
<script language="JavaScript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
<title></title>
</head>
<body bgcolor="#000000">
<table width="100%">
<tr bgcolor="yellow">
<td onmouseover="showmenu('site1')" onmouseout="hidemenu('site1')">
<a href="index.htm">Site 1
<table class="menu" id="site1" width="100%">
<tr><td class="menu"><a href="pag1.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">hi</a></td></tr>
<tr><td class="menu"><a href="pag5.htm">bye</a></td></tr>
</table>
</td>
0
It's starting to look like it should become, so here is the complete script-code.
The different menu items are colored red.Every line that begins with <tr><td> ends with </td></tr>, in other words that's one line.
<html>
<body>
<style>
body{font-family:verdana;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:red}
td.menu{background:yellow}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script language="JavaScript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
<title></title>
</head>
<body bgcolor="#000000">
<table width="100%">
<tr bgcolor="yellow">
<td onmouseover="showmenu('site1')" onmouseout="hidemenu('site1')">
<a href="index.htm">Site 1
<table class="menu" id="site1" width="100%">
<tr><td class="menu"><a href="pag1.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">something</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">hi</a></td></tr>
<tr><td class="menu"><a href="pag5.htm">bye</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('site2')" onmouseout="hidemenu('site2')">
<a href="http://www.site2.nl">Site 2</a><br />
<table class="menu" id="site2" width="100%">
<tr><td class="menu"><a href="http://www.your-domain.ext/pag1.htm">Who</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag2.htm">What</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag3.htm">Where</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag4.htm">Why</a></td></tr>
<tr><td class="menu"><a href="http://www.site2.nl/pag5.htm">When</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('site3')" onmouseout="hidemenu('site3')">
<a href="http://www.site3.nl">Site 3</a><br />
<table class="menu" id="site3" width="100%">
<tr><td class="menu"><a href="http://www.site3.nl/pag1.htm">Who</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag2.htm">What</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag3.htm">Where</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag4.htm">Why</a></td></tr>
<tr><td class="menu"><a href="http://www.site3.nl/pag5.htm">When</a></td></tr>
</table>
</td>
</table>
</body>
</html>Greetz from the Netherlands,
Jaap
0
Thanks Mr. Mesich, because i'm building my own site i know where I could find the script.
Greetz from the Netherlands
Jaap :P
0  |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
