Cross Browser Drop-down Menus
9. Cascading Submenus - Part One
I finally got around to experimenting with submenus with some success.
This version isn't finished yet, the submenus don't hide properly. See the next page for the complete finished version.
Browser compatibility: NS4.7, NS6.1, NS7.1, Mozilla 1.1, MSIE 6, Opera 6. If you test it with another browser, please let me know the results.
How it works
To make submenus work is more difficult than it might at first seem. It's possible to make it work in Opera and MSIE by adding nested tables for the submenus, but this doesn't work with NS4.x due to the way NS4.x handles nested layers.
The solution is to create the menus separately from the menu headers (not nested) and use javaScript to handle their placement (similar to the NS4.x method described in page 3). Main menus are placed relative to their respective menu headers. Submenus are placed relative to a transparent GIF on the right of the submenu header.
In the next part of the tutorial we'll try to get the submenus to show and hide themselves in a more sensible manner.
|