Navigation of a website is the key to its functionality, and having a menu system is an important element of navigation. I've built many menu systems over the years, and used menu systems built by others. Most of them fail the W3C checking tool, indicating that they do not meet web standards. Moreover, I was always skeptical of using others' systems even when they seem to work well, simply because I didn't understand how they work. This page presents a very simple menu system, and it is very easy to understand how it works.

I assume some, but not much, familiarity with javascript and html.

Open the menu by clicking menu.html. The source code can be downloaded and saved, generally by CTRL-U, control u, to view the page source, in most browsers.

The menu is extensively commented to explain what it does, but it is simple. It permits submenus of arbitrary depth (sub sub sub menus...). The menu uses standard unnumbered lists, and tracks sub menus simply by whether they are embedded -- if you start a new menu without closing the previous menu, you have a submenu. You can have menus open by default or not. The code assumes that circles and discs are used to indicate open and closed menus, respectively, but this can be suppressed for any or all of the lists. Indeed, it is suppressed on the top level menu at the upper left: click on Menu 0.

The menu system uses clicks to open or close submenus. My previous versions used mouse or hover actions, but these are not very mobile friendly. Moreover, opening submenus by hover has the problem that either they stay open or the whole menu shifts when they close. Both are a navigational nuisance. The highest level menu can open and close by hover, but all submenus require clicks to open or close. After spending time with it, I turned off the hover because mostly it doesn't do what I want on either desktop or mobile.

There are two key elements to making the menu work. First, the header for each menu is a list item of an earlier menu. Only these headers have class name lix. Similarly, the menu (unnumbered list) has class ulx. This means the header, which is clickable, and the menu, show up in the same order, and hence can be associated through the javascript function getElementsByClassName. Second, a menu can be open/closed by toggling style.display from block to none and back. Thus the strategy is that, when a list item is clicked, find the associated menu and toggle its state. The rest of the code uses circles or discs to indicate whether the menu is currently open or closed, and to initialize the starting position.