I wanted to create an interesting navigation system in which the visitor points at a heading to display a list of links. I decided to use the "pop-up" effect offered by JavaScript's onMouseover() event but it posed a problem.
It needed a corresponding onMouseout() event to rehide the list of links as the user's mouse moves away (otherwise the list remains open). But I realised that if I applied these events to the heading, the list would close as soon as the user moved their mouse away from the heading to click on one of the links!
The answer was simple. Create the navigation bar as a table with each heading and its corresponding list in a separate cell, and apply the onMouseover() and onMouseout() events to the cell rather than the heading. As table cells expand in height to accommodate their contents, the mouse remains in the cell as it moves over the links, so the list stays open. Move the mouse to the side or off the bottom of the list and the list disappears.
Click this text to download a text file containing the script used here.
Now try it out...
Home |
Excel |
Access |
Frontpage |