The menu module
This is a modular, gracefully-degrading, code-free (you don't have to write any JavaScript - no pesky onmouseovers!) approach to cross-browser DHTML menus. It works on IE/Win, Netscape 4, Mozilla and Opera, and probably any other DHTML-capable browser.
How to use: elements that you want to pop up should be given an identity
in the form id="menu-XXX". XXX can
be anything you like. If you want it to work in Netscape 4 you will need
to ensure that all such elements also have the style
position: absolute. (Don't set the menus'
visibility in the stylesheet, the script will take care of that for you -
the idea is that if DHTML functions are unavailable on the browser, all
the menus will be shown by default, not hidden.)
Next, write the links you want to make the menus open when the mouse is
hovered over them, in the form <a href="#menu-XXX">.
Finally, after all the menu elements and links, import the menu.js script.
menu.js requires the event.js module
(grab it here), so you will
have to import that too. eg.
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="menu.js"></script>
All globals used in this script are prefixed menu_,
so it should not interfere with other scripts you are using.
Latest version
Version 0.2: module, example page.
Note: you can put menu links inside other menus, but menu.js doesn't really support proper "hierarchical" menus yet, so opening a child menu won't keep the parent menu open. Also, avoid nesting menu layers inside other menu layers as it will confuse Netscape 4 (and probably make it crash, you know what N4 is like).
Another note: change the constants at the top of the script to make menus open and close more quickly/slowly to suit your page.