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:

• Object-orientated code for portability and multiple menus if needed.
• Easy constructor functions setup the menu data structure.
• Menus can be changed after loading by fully automatic and dynamic menu creation/update routine.
• Optional Fast Create mode when menus are created only when shown.
• Freeform cross-frame support built in.
• Each menu can be horizontal or vertical.
• Absolute or relative positioning of menus - either specified as a string or formula absolutely, or offset from trigger position on the fly.
• This means you can move the root menu, and all the others will follow.
• Optional centring/scrolling with window or any alignment needed --
  menus can be easily positioned by calculating JavaScript formulae/functions.
• Menus don't have to overlap each other thanks to adjustable popup show and hide timeouts.
• Nearly unlimited hierarchial menus (popouts) -- as many levels as needed.
• Automatically shows only one hierarchy at a time (like Windows' menus).
• Items automatically highlight through hierarchy back to root menu.
• Supports hoverable background colours and images throughout hierarchy.
• Supports hoverable alpha filtering for translucent items in IE/Win and NS6.
• Customisable ItemStyle classes allow you to pass each menu and/or item a uniform appearance
  by altering colours, text styles, dimensions, popout indicators, CSS borders etc...
• Supports frame targets and JavaScript commands in items.
• You can click anywhere on items to activate them.
• Customisable events applied to items -- onmouseover, onmouseout and onclick.
• Tiny code (once comments are removed) -- 10kb plus menu definitions, which is 2 or 3 seconds to download on a good dial-up modem, so your visitors won't be kept waiting.

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 in the Zip file to assist with this as well.

See my site for conditions of use, Frequently Asked Questions if you're stuck, compatibility information and new versions. If you are going to use this script, I would be grateful if you linked to my site somewhere, and left the comment in at the top of the source. My site is where I'll keep the most recent commented version. Also, try to employ a better sense of colour than I've used in this demonstration :)

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! -- Gus

Version History:

• v4.1:
  • Gave into temptation and added alpha filtering routines ;). Now your menus can be semi-transparent under IE/Windows or NS6.
  • Added ability to override any options of the ItemStyles for individual items.
  • Added my page object to easily detect document properties and slim down subframe/event capturing code.
  • Set cursor to hand/pointer only for items with actions. Blank items and 'sm:' items now have a regular arrow when moused over in IE4+/NS6, others have the 'hand' cursor.
  • Fixed small, non-fatal JS error that happened in cross-frame scripts with pages not fully loaded sometimes.
  • The usual tweaks to the example, comments, and cross-browser code.
  • v4.11 maintenance release: Fixed scrolling with window without frameset code enabled in Netscape. D'oh!
• v4.0:
  • Added freeform cross-frame support! Now you can specify a parent window (or layer) in which each menu is to be created with the startMenu() call.
  • Clarified usage of positioning formulae. Now, whenever you specify a number as a position of a menu it is offset from its parent, otherwise it is positioned absolutely on the page for formulae/strings -- for example, menus in other frames need absolute positioning.
  • Added 'Fast Create' mode for large menus. Now you can optionally create only the root menu initially, and other menus are created only when shown -- can speed load times.
  • Added ability to change border classes on mouseover to ItemStyles.
  • Made NS4 call the over event when you mouseover the text within menus. Should help people trying to assign status messages using menu events.
  • Changed the 'events' introduced in v3.1. Instead of assigning events to each item, you now assign one handler function to the entire menu, which gets called for every item.
  • Added option to disable menu hiding once shown, for permanently visible menus.
  • Loads and loads of other tweaks, and updates to the comments.
• v3.1:
  • Changed the way clicks are detected on menu items. Now, it uses document.onclick globally rather than per item, which seemed to have the occasional problem in NS4 under Windows 2000.
  • Added support for changable background images as well as colours for items.
  • Added support for optional, customisable menu delays for both showing and hiding. That means you can stop rapid mouseovers showing menus, if you want.
  • Added an example 'scroll-with-window' extension to the menu.
  • Added 'events' for each item. Now, you can specify a Javascript function when an item moused over/out, or clicked. Useful for adding click events to 'sm:' items...?
  • Changed the cross-browser code to support my new layer functions that can work across frames...
  • Made borderless items 1px larger, removing border overlap spacing.
• v3.0:
  • Where do I start...? OK, the whole script is now object-orientated. That means you can have several independent menus on one page using the one set of functions.
  • Totally rewrote the menu data structure, now using smaller constructor functions.
  • Menus are now named, not numbered, for that personal touch :).
  • Added the new ItemStyles feature for assigning colours and styles, and easier upgrades in future -- colours etc. are now defined outside the menu item creation section as JS objects and passed to the menu constructors, like CSS classes.
  • Added support for a much-requested feature: text styles change on mouseover.
  • Menu creation is now fully dynamic. You can recreate menus anytime after changing properties, for example adding or removing menus on the fly without reloading.
  • Included my new Layer API to make this script smaller when combined with other scripts like the scroller, as they can share useful functions like moving/colouring etc.
  • Transparent background colours for items are now supported.
  • Combined several functions into one 'popOver' function, including the new lightup routine that can change text styles and lessens flicker as items are highlighted.
  • Support for JavaScript formulae as menu positions -- for example, to centre the menu.
  • You can now position the popout indicator how you want, aligned to either edge of an item.
  • Loads and loads of other changes and tweaks.
• v2.3:
  • Rewrote the hierarchy tree calculator function as NS4.05 and earlier threw an error when they encountered a return within a while(1) loop.
  • Changed the way the construction functions parse input, reducing file size further.
  • Tweaked the example and comments slightly, as per usual...
  • v2.31 maintenance release: Fix for NS4/Mac related to the optional centring function causing page reloads.
• v2.2:
  • Fixed a sneaky bug in some versions of NS4 when it refused to evaluate a link to 'javascript:' and instead set it as the page location. Some things you think the NS development team would realise before releasing their browsers...
  • Cosmetic fixes: altered padding slightly in NS4, added z-indices of 1000 in all browsers, and stopped NS6 displaying menus slightly larger than intended.
  • Also defined width of items in IE/NS6, that means including <center> tags in your item text should work again.
  • A simple feature I should have included before: menus don't have to be sequentially numbered now.
  • The usual minor tweaks in the comments and functions, no menu[] array changes.
• v2.1:
  • Made IE5 use the DHTML object model rather than the DOM to improve IE5/Mac compatibility slightly.
  • Speed increase by ditching tables in favour of nested divs/layers in IE/NS6.
  • You can now specify how much padding you want between item borders and text.
  • All links are now JavaScript-based, and you can target any frame or JS function.
  • You can now click anywhere on the menu items to activate them!
  • Included an example function to centre the menus, due to popular demand :).
  • Captured onLoad and onResize in the script, now no parameters to the BODY tag need to be specified. You can still specify them there if you want, though.
  • Added another example item constructor to allow you to create multicoloured items in a menu. See the 'Reopen' menu above for an example.
  • Specified dimensions for items in IE, hopefully prevents IE4 from displaying scrollbars where it shouldn't.
  • Loads of other small updates to code, comments, readme etc.
• v2.0:
  • Basically recoded the menu creation routine from the ground up. Now menus are created dynamically after the document loads, improving NS4 compatibility.
  • Added support for creating horizontal menus automatically and removed the 'custom root menu' feature. Now any menu can be horizontal (not just the root).
  • Recoded sections using W3C DOM methods to access elements, for NS6 compliance.
  • Added a NS4 window resize handler to reload the page when window resized horizontally, as NS4 has major problems with DHTML and resizing.
  • Menu references are now built into the menu array e.g. menu[0][0].ref, so ID's are no longer necessary.
  • Frame targets added to the menu array separately, since so many people seem to be using them. So tweaking the URL for additional attributes is no longer necessary.
  • Popout indicators can now be specified for each menu individually.
  • Borders are now specified via stylesheet classes you can add to the menu array.
  • Tweaked many small things, e.g. root menu items that don't target menus now dim instantaneously when you mouseout.
• v1.1:
  • Added support for stylesheets for each individual menu.
  • Split the item height to table height and spacing, more reliable that way
  • Fixed bug in IE4 when menus weren't stretched properly. The fix was to change a zero to a three halfway through the code :).
  • Updated comments and extended example slightly.
  • Tidied up internal operation a little bit, should display faster now.
• v1.0:
  • Initial public release.

Known Issues / Future Plans:

At the moment, NS6 and IE5 have a slightly different 'box models' i.e. whether borders show inside or outside items. I've implemented a fix that adjusts item size for NS6, 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 you might as well just leave the script as-is.

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.

The mouseout and mouseover events are not entirely reliable in NS4, as sometimes it calls a mouseout, without a corresponding mouseover, and so on. IE and NS6 behave well. These events may also be called multiple times as the browser bubbles incidents of events within items, so probably don't use them for much more than status messages etc.

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