The anatomy of a menu

As you can see, the menu is a list (ul). This list has items (li); these items translate to menu items. Each item can optionally contain a list which if present will be translated to the item's submenu.

As intuition tells you, the top-level list will be displayed as a horizontal menu bar. Level-one nested lists will be the first level of popup menus, etc.

Menu items

Each menu item is described by a li (a list item) element. In the menu, it will belong to the (sub)menu defined by the parent list.

A li that only opens a submenu can contain text (menu label), an optional icon (which is an usual img element) and a nested list. A li which has an associated action needs to contain an a (link) element. The action of a menu item can be either to trigger the execution of some JavaScript code, or to open some URL.

If the action is to execute JavaScript code, then the link's href argument will be in the form "javascript:doAction()" where doAction is your custom defined function. If the action is to open an URL, the href is the URL, as usual, and the link can optionally include a target attribute which specifies in which frame to open the URL (for example "_blank" will cause the link to open in a new window).

Menu items can display a help string in the window status bar. This help string is passed as the "title" argument to either the li element or to the a element.

If present, the link element takes precedence over the li element when deciding what label and help string to assign to the menu item.

Menu item examples

Being the very simplest form of a menu “item”, here's how to create a separator. A separator is an empty list item. If the context is the main (horizontal) menu bar then it will appear as a vertical separator; otherwise, if included in a popup, then it will appear as a horizontal separator.

<li></li>

Completely useless menu item (it doesn't declare any submenus, no action when it's pressed, no keybinding and no icon):

<li>Label</li>

Menu item that displays an alert, assigning "S" as shortcut key. Note that the shortcut assignment is extremely easy: just prefix the letter which you want to be assigned with an underscore character ('_'). In order to include a literal underscore in the menu label, just write it twice ('__');

<script type="text/javascript">
  function showAlert() {
    alert("Blah blah");
  }
</script>
[ ... ]
<li><a href="javascript:showAlert()">_Show something</a></li>

The script section from above code should be included in the page head element or in an external JavaScript file which is included in the document. Try not to mess HTML with JavaScript ;-)

Note (2.7): Starting with version 2.7 there is an alternate way to define key bindings: by using the “accesskey” attribute of the <a> element. Besides the obvious semantic improvement, this leaves the label text intact so that search engines won't see any underscores into it. Here's an example:

<li><a accesskey="s" href="javascript:showAlert()">Show something</a></li>

OK, now it won't underline the character, but you can do this manually if you wish:

<li><a accesskey="s" href="javascript:showAlert()"><u>S</u>how something</a></li>

It's all about your choice. ;-)

Menu item that opens an URL. It shows a help text in window status bar ("Go to dynarch.com"), also registers "D" as the shortcut key. It displays an icon ("images/dynarch.gif"); the icon image path must be either absolute or relative to the current HTML page (after all, remember that you are writing normal HTML). When the menu item is clicked, the URL is opened in a new window (target="_blank" is specified on the link element).

<li>
  <img src="images/dynarch.gif" alt="" />
  <a href="http://dynarch.com" title="Go to dynarch.com" target="_blank">
    _Dynarch.com
  </a>
</li>

Item that contains a submenu. The submenu is made of "useless" items, that is, they don't register any actions, nor do they have submenus. Upon mouse hover, the "File" item will display in the window.status "File options". Because no link element is present, the title attribute appears directly in the li element.

<li title="File options">
  _File
  <ul>
    <li>_Open</li>
    <li>_Save</li>
    <li>Save _as...</li>
  </ul>
</li>

The horizontal menu bar

As long as you know how to define a submenu, then defining the main menu bar is extremely easy: just put there an ul element, whose ID you pass to DynarchMenu.setup.

<ul id="menu">
  <li>
    item 1
    [...]
  </li>
</ul>

As you can see, we denoted an ID ("menu") for the top-level list; this ID is important because that's how we identify our menubar, when we call the body.onload handler:

<body onload="DynarchMenu.setup('menu')">