Sets up a system of multilevel popup menus on a page. Be sure to check my site regularly for compatibility and updates, this is heavily under development. Features 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.
• Each menu can be horizontal or vertical.
• Relative positioning of menus - taken 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 positioned by calculating JavaScript expressions.
• Menus don't have to overlap each other thanks to adjustable popup show and hide timeouts.
• Near 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.
• Customisable ItemStyle classes allow you to pass each menu and/or item a uniform appearance
  by altering colours, text styles, dimensions, popout indicators, 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.
• Small code (once comments are removed) -- around 8.5kb plus menu definitions,
  which is 2 or 3 seconds to download on a good dial-up modem.

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:

• 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.

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.