Simple website menu

Download the script

This is a simple list-based menu, with CSS2 menu triggers for browsers that support them, and a touch of equivalent javascript for others. For discussions about this script and others like it, please see the list-based menus thread at CodingForums

If you want a list-based menu with more advanced design, usability and accessibility features, please check out Ultimate Drop Down Menu

The following browsers support ...

Script-driven menus:
  • Opera 7 or later,
  • Mozilla / Firefox et al,
  • Safari,
  • Konqueror 3.2 or later,
  • Internet Explorer 5 and 6 (including Mac/IE5)
Keyboard access to submenus (when scripting is available):
  • Mozilla / Firefox et al,
  • Internet Explorer 5.5 and 6
CSS-driven menus:
  • Opera 7.5 or later,
  • Mozilla 1.1 or later,
  • Safari 1.2 or later,
  • Konqueror 3.2 or later
Styled navbars, but not menus:
  • Opera 5 and 6,
  • Konqueror 3.1 or earlier

Other browsers will see the plain list(s) fully expanded; this includes non-graphical user-agents, such as screenreaders (including browser-based readers like JAWS and HPR), text-browsers, and search-engine robots.

Known issues

  1. Child-menus of a horizontal navbar have rendering problems in Mac/IE5, MSN for OSX, and Opera 7; and they be in the wrong vertical position in Mozilla 1.4 or earlier, and Opera 7.2 or earlier. Therefore, I recommend that you don't have child-menus with a horizontal navbar - stick to a single level of menus.
  2. In Safari 1.2 and Opera 7 or later, it is actually possible to keyboard navigate to the submenus, but they won't be visible.
  3. In Safari 1.0, the menus of horizontal navbar cause a horizontal scrollbar when they're open; and the rollovers are sometimes either 'sticky' (don't clear onmouseout), or don't work at all.
  4. In MSN for OSX, all menus have rendering and/or positioning problems.
  5. In ancient Mozilla browsers (earlier than Gecko 1.0), all menus have rendering problems.

The first issue is easy to avoid; the second issue is unfortunate, but I'm stumped for a way to solve it; the other isses are not particularly serious, in my opinion. If you know of workable solutions for any of these, please do let me know.