Cross Browser Drop-down Menus
4. Putting menus together
So far we've only had one menu - not much use really. Here's something a bit more useful:
The revised code is below:
We've added 2 more menus and named all three very carefully. The menus are called "myMenu1", "myMenu2" and "myMenu3". The images used for Netscape 4.x to position them properly are called "myImg1", "myImg2" and "myImg3".
The "showMenuTest" function has also changed. It now accepts another parameter - "menuNumber" - which is used to show the correct menu. And it calls the "hideAllMenusTest" function to get rid of any previously shown menus.
There are are a couple of other new lines of code:
- numMenus = 3;
- document.onmouseover = hideAllMenusTest;
The first stores the number of menus. The second sets up an event handler that calls another new function ("hideAllMenusTest" - which unsurprisingly hides all the menus) whenever the mouse is put over the body of the page.
One final new trick is: onmouseover="event.cancelBubble = true;" which stops mouseover events being passed to the body of the page if the mouse is over one of our menus.
More Netscape Problems?
Guess what? The code doesn't work quite right on Netscape! The "document.onmouseover" handler doesn't do the job it's supposed to do. In the next section We'll add some more code to hide menus that are no longer in use that will work properly with Netscape 4.x
| 
