Cross Browser Drop-down Menus
10. Cascading Submenus - Part Two
Have a look at the latest version of our drop-downs:
We're pretty much finished now.
Browser compatibility: NS 4.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.
The changes
The first change you may notice is that we've replaced the transparent GIF with a nice little arrow to show that a submenu is available. It is now this image that the submenus align with.
The other change is that the submenus now show and hide themselves in a more sensible way, moving the cursor off a submenu header hides the corresponding submenu.
How it works
To make this work I added an array called tiers, one value for every menu or submenu. Tier 0 is the main menus, tier 1 is their submenus, tier 2 the submenus branching off tier 1 and so on.
I also added a new function: hideAllMenusTier which takes one paremeter (called tier) and hides all menus in a lower tier. This function is called whenever the mouse goes over a menu item or submenu header and rather neatly hides any submenus that shouldn't be there.
| 
