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:

• Easy array-based setup of menus.
• Menus automatically written to document by constructor function.
• Each menu can be horizontal or vertical.
• Optional centring (or right-aligning) as well.
• 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.
• Popup exit timer so triggers and menus don't have to overlap each other.
• Adjustable height and spacing for each item.
• Customisable colours for each menu - background and hover.
• Each menu can have its own style associated for both text and border e.g. Reopen menu above.
• Near unlimited hierarchial menus (popouts).
• Automatically shows only one hierarchy at a time (like Windows' menus).
• Items automatically highlight through hierarchy back to root menu.
• Supports frame targets and JavaScript functions in items.
• You can click anywhere on items to activate them.
• Small code (once comments are removed), which is always a bonus.

You'll definitely want to trim out most of the comments, to speed load time. Also, if you are going to use this script, I would be grateful if you linked to my site somewhere, even if it a comment in the source. That's 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!

Version History:

• 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 major disagreement as to whether borders are rendered inside or outside items. I've implemented a fix that adjusts spacing 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.

I'm considering ditching CSS borders entirely and colouring the background of the menu instead. The downside of this will be 'crazy' borders won't work, and items won't be able to have clear spacing between them. However, you will then have complete control over border presence/thicknesses for each item, and the background table will no longer be necessary. You could even have no borders between items except for 'separators'. Sounds like a plan? Or not?

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.

So next, I plan on improving the lightup code to remember what's already lit a little better than it does now - it should reduce the occasionaly flicker in NS4, and speed things up. It should also pave the way for adding 'changing text colours' on mouseover, which is a popular request.