Cross Browser Drop-down Menus
2. Getting Started
A drop-down menu is basically a part of a web page that remains hidden until the user does something.
The bit that pops up is a a <div> with a table inside it.
The HTML for the div (which I've call "myMenu") is as follows:
Note the image (a transparent GIF) before the text. For some reason, Netscape 4.x won't display anything but the table border without that in there.
Showing and hiding DIVs
The HTML for the link is as follows:
This calls the function "showMenuTest" when the mouse is put over the link, and "hideMenuTest" when it leaves.
As I said in the previous page, the code is based on a tutorial on the Apple Developer site. The Apple tutorial describes hiding/showing DIVs (or layers) better than I could so I won't go into detail on that here.
The Apple tutorial also provides a toolkit of JavaScript functions for dealing with DIVs which I use in my menus. In this case the "changeObjectVisibility" function is used to display the <DIV> (this in turn uses the "getStyleObject" function). For all these functions, see below:
Problems
So far, so good. We have a "menu" that pops up when the user puts his/her mouse pointer over a link and disappears when the pointer leaves. In Internet Explorer, Opera, Netscape 6+ and Mozilla the menu appears where we put it - right after the link - perfect! BUT, if you're using Netscape 4.x you'll notice that in the example above, the menu doesn't appear underneath the link as we would like. I don't really know why it appears where it does. In the next part we'll make sure the menu goes where we want it.
| 
