This script creates and manages a system of multilevel popup menus on a page.
Be sure to check my site for compatibility information and updates!
Script License Agreement
You may use this script only if you agree that:
- You must EITHER:
- Donating Users: This script is "donation-ware". If you can
make a donation to support
this script, it may be used on a website without a crediting link.
Please consider making a donation! I have spent a lot of time developing, debugging and
documenting scripts, and any support is welcome.
More info...
- Free Users: All websites using this script for free must contain somewhere
a visible crediting link to TwinHelix Designs, e.g.
'DHTML / JavaScript Tree by TwinHelix Designs'.
- You must leave the "Script Name/Author/URL" comment in the source of the script file.
- This script is provided on an "AS-IS" basis, without any warranties, and you use it entirely
at your own risk.
- This script may not be redistributed, sold, rented, leased or sublicensed to third parties
without my prior consent.
If you have another use for the script (for example, within a web application) or wish to
arrange alternate licensing terms, please
contact me for more information.
- Small code -- core script compacts down to only 12kb plus menu definitions and
setup/extras, so your visitors won't be kept waiting.
- Object-orientated script for portability and multiple menus if needed.
- Easy constructor functions setup the menu data structure.
- Speedy menu creation in most browsers shows your menu before the page loads.
- Freeform cross-frame support built in.
- Each menu can be horizontal or vertical.
- Optional centring/scrolling with window or any alignment needed --
menus can be easily positioned by calculating JavaScript expressions, for instance
relative to page links or window dimensions.
- Otherwise, relative positioning means that you can
move the root menu, and all others will follow.
- Dynamic menu update mode allows menus to be changed
after loading.
- Nearly unlimited hierarchial menus (popouts) -- as many levels as needed.
- Menus don't have to overlap each other thanks to adjustable popup show and
hide timeouts.
- 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.
- 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. using a powerful class system.
- Supports hoverable background colours and images throughout hierarchy.
- Background colours may fade between over and out states.
- Supports hoverable alpha filtering for translucent items in IE/Win and NS6.
- Item content can change on hover to any HTML string.
- 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, to
extend the script with your own code.
- Customisable show and hide animations, for example this clipping animation.
- Much more inside...
First, make sure you've read and understood the "Script License Agreement" above.
If you can make a donation to support this script, that would be great.
Anyway, the pop_syntax.html file contains all the information
needed to start working with the script, so load that up and start tweaking.
If you're stuck, see pop_help.html, which contains a list
of Frequently Asked Questions and Known Issues.
Good luck! -- Angus
- Massive changes in script organisation -- now split into several files, the object
constructor is at the top of the core file, and functions are added to its prototype.
- Rewrote the events script -- now each time you declare a PopupMenu() object the script
adds it to a list, and cycles through this list to activate menus, so multiple menus are
easier, and it now handles both single-frame/cross-frame usage.
- HTMLified the documentation, and included FAQ and Syntax Helper utility with script.
- Added "fading background colour" capability to the script.
- Added changing item text and popout indicator on mouseover (for images swaps etc).
- Added ability to position menus over named anchors in the page.
- Items now contain A HREF tags linking to files, for better tabbed browser compatibility
and allowing opening files in new windows.
- Added some menu extensions including an automatic selectbox/IFRAME/etc position detecting
and hiding function, a long menu scrolling function, multi-column menus and keypress
navigation. See the "pop_extras.js" file for more.
- You can now have several 'root' class menus in one menu object if you want.
- Made the startMenu and addItem commands return references to objects for tweaking, and
each item now has mouse event handlers for easy extension e.g. 'sm:' clicking.
- "Show on click" setting is now an option on the startMenu() command, and has been
modified so that once you click a menu, mouseovers will also show menus (like Windows).
- Added "Hide menus on document click" option.
- Changed the internal menu show/hide function arrangement a little.
- Changed the menu z-index/stacking order so submenus will always show over parent menus
regardless of the order in the script data.
- Reduced occurance of menus reappearing after navigation in framesets.
- Fixed portions of translucent dropshadow being occasionally visible through item
background when animation is disabled in early NS6 versions (I tested Mozilla 0.90).
- Fixed 'CSSmode' detection under Opera 7 and IE5/Mac with a strict DOCTYPE, and also in
framesets with a mixture of DOCTYPEs. Items are now correctly sized.
- Tweaked NS6+ CSS cursor handling, should now show 'pointer' cursors properly for 'sm:'
and unlinked items.
- Translucent items now work in Safari 1.1+ and hopefully more browsers in the future.
- Loads of other minor tweaks.
See pop_help.html for a full version history.