this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
Once we've set the menu to display, we have to figure out how to hide it again. The secret to a pull-down menu is that you don't want it to close when you move the mouse off the triggering link; you want it to close when you move the mouse off the entire div
. That is, if you're anywhere on the menu, you want it to stay open. Here, we assign a class
to the parent of the current link (that's the div
around the link), and then we assign onmouseover
handlers to the div
. These trigger toggleDivOn()
, which will handle the div
from now on.
Here's the trick: if we got here, then by definition, the cursor is inside the div
. And consequently, just setting the onmouseover
to be immediately triggered.