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
- 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 don't have to overlap each other thanks to adjustable popup show and
- 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...
- 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.
- Tiny code -- compacts down to only 11.5kb plus menu definitions and setup/extras,
which is several seconds to download on a good dial-up modem, so your visitors won't be
Conditions of Use:
- 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.
- You may not redistribute this in any form, either intact or modified, without my consent.
- 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:
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...
- 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.
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
- 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
- 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...
- 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.
- 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
- 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!
- 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.
- 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
- 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.
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
- Made borderless items 1px larger, removing border overlap spacing.
- 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.
- 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.
- 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
- Fixed a sneaky bug in some versions of NS4 when it refused to evaluate a link to
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
- The usual minor tweaks in the comments and functions, no menu array changes.
- Made IE5 use the DHTML object model rather than the DOM to improve IE5/Mac
- 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.
- 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.
- 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.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.
- 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.
Known Issues / Future Plans:
This script should run in Opera, with 'run' being the operative word. Opera's HTML/CSS support
'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
'Future Plans' is a little misleading as I'm suffering from scripter's block ;). Suggestions are