Popup menu

This javascript takes control of a specified list and changes the class (CSS) used by any child lists which have their id attribute set. The javascript also adds mouse and logical event handlers to relevant objects in the menu to implement the show/hide behaviour (through the style.display property).

Version

14 October 2002

Download

latest release

Source Code

Example menu

Here is the example menu shown without javascript (id attributes omitted) and specific css. This is displayed in browsers which do not support javascript, so the menu is completely accessible.

Links
- Crocodile story
- Ivory City (pokemon)

How to create a menu?

Create a simple menu using a nested list (2 levels only);
Give the parent node of the list an id (eg. <ul id="mx">);
Give nested sections an id (eg. <ul id="js">) if you want them controlled by the script;
Set up the classes in a linked style sheet as you require;
Call mSet(menu, classname); to control the menu (eg. <body onload="mSet('mx', 'm');">).

Current issues

Only supports one level of expansion;
Menu may be partially off screen (due to absolute positioning);
Opera 5.12 performs strangely as page reflow is not supported;
Keyboard (tabbing) support unusual in Netscape 6;
Using position relative crashes Netscape 6 (CSS issue, not script).

Tested on

Optimal performance in IE5+, NS6 (javascript enabled);
Untested in IE4/Win;
Untested on operating systems other than win98 (sorry, it's all I've got!);
Disabled in Netscape 4, but html menu is accessible;
Disabled without javascript, but html menu is accessible.

Comments?