Sets up a system of multilevel popup menus on a page. Be sure to check my site regularly
for updates, this is heavily under development. Features include:
- Easy array-based setup of menus.
- Menus automatically written to document by constructor function.
- Menus 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.
- 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's text 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.
- 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. Please
leave a link to my site in there somewhere - 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 :)
Version History:
- v2.0:
- Basically recoded the writeMenus() 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.
- 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:
Future Plans:
As always, I'm open to ideas. Soon I'm planning to add IE4+/NS6+ support for clicking
anywhere on the menus rather than on just the link, but this is a bit of a problem with
frame targets right now.