Forum Moderators: open
The menu is called as you would expect:
<a href="#" onmouseover="showmenu(1)">Menu Name</a>
That function hides any menus that are displayed, and then displays menu #1 by its setting <display:block>, and absolutely positioning it. The menu itself is just a regular <table>
I tried to get the menu to disappear automatically like so:
<table onmouseout="hideAllMenus()">
But when I do that, the menu disappears when I mouse *on* to it!
I found I could fix this by adding what seemed like a superflous onmouseover:
<table onmouseover="this.style.display='block'" onmouseout="hideAllMenus()">
The problem then is that in Safari, the a:hover rollovers for each link in the table no longer work.
Surely there's a simple solution?
I think I know what you're experiencing, when you move the mouse around on an image it flickers between mouseover and mouseout and acts very odd. Before I started using permutations of the Suckerfish methods what I wound up doing was setting a timer and when I'd mouse over, set a variable to mouseover=1. The timer would reset and allow the object to display or hide based on the state of mouseover. It also was a bit convoluted, the Suckerfish methods work pretty well.
Simplest I've found, and lightest, is the Suckerfish menus, did you give them a go?
No, I'm interested in getting my own menus working.
I think I know what you're experiencing, when you move the mouse around on an image...
No, I'm not using images. As I said, I'm using tables.
they instead disappear when the user mouses ON
The solution is more complicated than you'd like to hear, I'm afraid.
Let's say you have a table like this:
<table onmouseout="hidemenu(1)">
<tr>
<td><a href="#" onmouseover="showmenu(1)">Menu Name</a></td>
</tr>
</table>
You mouse over the link. The mouseover event fires. However the browser thinks you are leaving the table cell in order to enter the link. This is a strange rule, but it is by design. So the table's mouseout event will fire when you move into the link.
The solution is to delay the hidemenu() function for 200 or more milliseconds. If another mouseover event hasn't fired by that time, you can safely hide the menu.
I can't provide a complete solution because I haven't written a DHTML menu myself; this is information I learned from the book "Modern Web Design" by Stuart Langridge (which I highly recommend).
Hope that helps,
Collin
Below is a complete example. The menus disapear automatically when you mouse off, but on rare occasion they don't, so I included the <document.onclick> so users can click to dismiss the menu when that happens. (They can also just drop another menu and mouse off of it.)
<html><head>
<script type=text/javascript>
document.onclick=hideAllMenus;
function showMenu(menuNumber) {
hideAllMenus();
document.getElementById('menu'+menuNumber).style.visibility='visible';
}
function hideAllMenus() {
for (counter=1; counter<=3; counter++) {
document.getElementById('menu'+counter).style.visibility='hidden';
}
}
</script>
<style type=text/css>
.menu { visibility:hidden; position:absolute}
.menu ul {padding-left:0.5em; margin-left:0.5em; margin-top:0px; padding-right:5px; border:1px solid gray; list-style:none}
a:hover {background:yellow}
</style>
</head><body>
<table border=1 cellspacing=0 cellpaddin=5><tr>
<td width=50 onmouseover=showMenu(1)>Home</td>
<td width=50 onmouseover=showMenu(2)>Products</td>
<td width=50 onmouseover=showMenu(3)>Prices</td>
</table>
<div id=menu1 class=menu style=left:0 onmouseover=showMenu(1) onmouseout=hideAllMenus()>
<ul>
<li><a href=page1.htm>Page 1
<li><a href=page2.htm>Page 2
<li><a href=page3.htm>Page 3
</ul></div>
<div id=menu2 class=menu style=left:55 onmouseover=showMenu(2) onmouseout=hideAllMenus()>
<ul>
<li><a href=page4.htm>Page 4
<li><a href=page5.htm>Page 5
<li><img src=parts/star.gif>
<li><a href=page6.htm>Page 6
</ul></div>
<div id=menu3 class=menu style=left:110 onmouseover=showMenu(3) onmouseout=hideAllMenus()>
<ul>
<li><a href=page7.htm>Page 7
<li><a href=page8.htm>Page 8
<li><a href=page9.htm>Page 9
</ul></div>
</body></html>
