More Info


You are in: home > javascript > drop down menu tutorial >

There is a newer drop-down menu tutorial at:
http://www.aspandjavascript.co.uk/javascript/drop_down_menu_tutorial_version_2/

click here to go to the new drop down menu tutorial

Unfortunately, support can no longer be offered for this tutorial

Cross Browser Drop-down Menus

9. Cascading Submenus - Part One

I finally got around to experimenting with submenus with some success.

View cascading drop-down menu example.

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.


<< Part VIII: Wrap it up in ASP Part X: Cascading submenus - Part Two >>

Get the code:
[Drop-down version] [Side-menu version] [Cascading version]

If you like Javascript Cascading Drop-down Menu ,
please rate it! @ ScriptSearch.com
Rate Our Program
@ HotScripts.com
Rate Our Program
@ AllTheScripts.com





 © James Austin 2002-05 Web site design by James Austin