Cascading Popup Menus v5.01

by Angus Turnbull - http://www.twinhelix.com. Updated: 22 February 2002.



Sets up a system of multilevel popup menus on a page. Be sure to check my site regularly for compatibility information, Frequently Asked Questions and new versions. Features of this script include:


Conditions of Use:

  1. This script is provided as-is, without a warranty of any kind, as although I strive to make it as compatible as possible I cannot guarantee it will work in all target environments, so test thoroughly.
  2. You may not redistribute this in any form, either intact or modified, without my consent.
  3. On sites that use this script, you should place a visible link to the splash page of my site, with a short description, for example: "DHTML / JavaScript provided by TwinHelix Designs". (Please don't link to individual pages within this site as my splash page detects browser capabilities). Also leave the my 'script name' comment in the source. These stop interested users emailing the webmaster asking how to acquire the scripts. If linking me doesn't suit your project...
  4. COMMERCIAL USERS: This script is 'donation-ware'. If you want to support this script and/or you are using this script as part of a commercial project, please consider making a donation via my site. After all, I have probably saved you several months developing, debugging and documenting a comparable script. Donors may take an optional exemption from a 'visible link' on the site, if that does not fit your site design.

Usage Instructions:

Most of the instructions are already in the source -- open this up with your favourite text editor and start customising. Before deploying this on your site, be sure to remove the comments! You can double or treble loading speed that way -- there's a handy utility from my site to assist with this as well.

See my site for Frequently Asked Questions if you're stuck, compatibility information and new versions. Basically, to use this script cut and paste the script element and stylesheet into your page. You may wish to make the script element at least an external .JS file, which should speed loading times as people navigate; possibly do the same with the stylesheet.

Good luck! -- Angus


Version History:


Known Issues / Future Plans:

This script should run in Opera, with 'run' being the operative word. Opera's HTML/CSS support is pretty good, but its JavaScript/DHTML engine is extremely limited compared to more 'standards-compliant' browsers like IE and NS6 ;). The menus should show, but don't expect animation/dynamic updates or text colour/border/translucency changes in Opera 5 or 6. Opera 5 also seems to ignore ItemStyle padding, but Opera 6 is OK. Transparent background colours also seem to be an issue, and background image changing is unsupported by Opera 5. If you think Opera users might frequent your site, be sure to test your menu out thoroughly!

At the moment, NS6/Opera and IE/NS4 have a slightly different 'box models' i.e. whether borders show inside or outside items. I've implemented a fix that adjusts NS6/Opera, but be aware that with CSS borders you can't have pixel-perfect positioning. Of course, you should definitely test in as many browsers as possible when deploying this menu - at least NS4 and IE. IE6 now can be made to render in compliance with the DOM spec by setting a strict doctype, but I would leave the doctype out of your page entirely as it has been known to cause problems in NS6 with this.

Speaking of Netscape 6, there are still a few nasty bugs in that browser. If the contents of your items are bigger than the items themselves, occasionally it doesn't hide menus properly... sections remain onscreen after mouseout. So make sure your items are large enough for anything that they will contain! This also happens occasionally with transparent background colours... your mileage may vary on this one. As always, test thoroughly!

Text style changes may induce a little flicker in Netscape 4 as the layer contents have to be rewritten -- other browsers are OK for this as they allow manipulation of classes through the DOM. Also, the cursor changes from a hand to a pointer over the menus in NS4. This isn't a bug as such, you can still click anywhere to activate them. You just can't specify stylesheet cursors in NS4.

'Future Plans' is a little misleading as I'm suffering from scripter's block ;). Suggestions are always welcome...