Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

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).

14 October 2002
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.

How to create a menu?

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

Current issues

Tested on


[ inspire logo ]
Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.
Fork me on GitHub