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.
• Two menu creation modes selectable by browser, 'Fast' is used for IE, NS6 and Opera and 'Dynamic' for NS4.
• Dynamic menu update mode allows menus to be changed after loading.
• Fast creation mode uses document.write() inline for speedy creation.
• 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.
• Popouts can show on mouseover or on click, set on a per-menu basis.
• 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...
• Arbitrary HTML can be added to menus, like example dropshadows and menu borders.
• 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.
• Customisable show and hide animations, for example this clipping animation.
• Small code -- compacts down to only 13kb plus menu definitions and setup/extras, which is several 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 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:

• v5.1:
  • Menu positioning routine upgraded. Now, it's much faster (only repositions visible menus as needed) and can reposition layers of relative menus on scroll.
  • Relatively positioned menus now always show within window borders.
  • You can now specify mouse cursors to use in the ItemStyles (2 extra parameters).
  • Example shiny new alpha fading animation for IE5.5+ on Windows, commented in the animation function, and a DXImageTransform filters example too. The animation is now disabled by default in Mozilla versions prior to 1.0 (such as NS6).
  • Item positions and dimensions are now calculated by the addItem() command instead of the update function.
  • Added 'extraHTML' property to menu data tree, allowing you to insert arbitrary HTML strings into the menu container layers.
  • Combining the above two points, I've included demo functions to extend the menu with semitranslucent dropshadows and whole-menu borders, and reposition/curve menu items.
  • Rewrote parts of crossframe code, now doesn't show JS errors when documents are loaded outside the menu, and should support more flexible nested framesets/windows.
  • You can specify custom 'oncreate' events for menus to customise appearance further.
  • Added ability to show submenus on click rather than on mouseover if desired.
  • Some tweaks to the cross-browser code section, including a detection of strict doctypes and/or strict CSS1 compliance to improve IE6/NS6 compatibility.
  • Fixed bug in Opera 5/6 with IE emulation mode turned off.
  • Fixed function-in-function in NS4.05, and also tweaked popClick() function for very new Mozilla betas/NS7 pre-release -- now it's passed parameters instead of using overM/I.
  • Random internal tweaks and polish ups, a whole load of comment reorganising, and changed the default colour scheme to make it bearable :).
• v5.0:
  • Added multiple menu creation modes for better browser compatibility, the script now works in Opera! Not all features are available there, but the menu should show.
  • Moved the menu script to the BODY of the page as browsers that use Fast mode call document.write() to create their menus.
  • Menu animation! Example clipping effect has been added to the 'Optional Code' section, with a corresponding architectural change, now the menu calls show and hide functions that you override with special functions like these.
  • Recorded dimensions and visibility of menus as part of the menu object.
  • Rewrote part of the over() routine to handle animating menus more reliably that don't show/hide instantaneously, also reducing unneccessary hide calls so large menus should be more responsive.
  • Built in some more internal error-checking so non-existant menu names should not stop the display of the root menu, to make debugging typos easier.
  • Completely reorganised the documentation/example, more modular and easier to follow now... hopefully...
  • Rewrote the cross-frame .JS file for clarity and to support new creation modes.
  • Rewrote events section, hopefully less confusing.
  • Also tweaked NS4 resize bug handler.
  • v5.01 Maintenance Release: Changed sample animation code to remove JS error in cross-frames usage and set Z-Indices to raise showing layers above hiding ones.
• 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:

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!

Netscape 6 still has a few nasty bugs that can rear their head sometimes. 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...