The setup process is extremely simple. You just need to write the menu as structured HTML (nested lists). No JavaScript code needed (except one single function call at “onload”). This way of setting things up has lots of advantages over pure JavaScript-based methods that you can find in most menus:
Here is a complete menu example:
<body onload="DynarchMenu.setup('menu')"> [...]
Upon body onload event we called “DynarchMenu.setup('menu')”, which will patch the list with the given ID ("menu") to become a horizontal menu. And the following code should be placed somewhere in your page, at the position where you want the horizontal menu bar to appear.
<ul id="menu"> <li title="Contains file operation options"> _File <ul> <li> <a href="javascript:doOpen();" title="Open a new file"> _Open </a> </li> <li> <a href="javascript:doSave();" title="Save the current file"> _Save </a> </li> <li> <a href="javascript:doSaveAs();" title="Save as a new file"> Save _as... </a> </li> </ul> </li> <li title="Links to other sites"> _Links <ul> <li> <img src="icons/mozilla.gif" alt="" /> <a href="http://www.mozilla.org" title="Mozilla browser (opens new window)" target="_blank"> _Mozilla </a> </li> <li> <img src="icons/opera.gif" alt="" /> <a href="http://www.opera.com" title="Opera browser">_Opera</a> </li> </ul> </li> </ul>
The above code generates the following menu:
Upon the body "onload" event, at the call to DynarchMenu.setup("menu"), the above list will be hidden and a menu similar to the one existent in this page will be displayed. The underscore character placed before a letter means that the letter will be underlined in the final menu and a shortcut key will be registered for that key so that the end-user can press the key directly, assuming that the popup containing the item is visible.
The result can be seen below, assuming you're using a supported browser. If you look into the page source, you'll see the same HTML code as written above, below this paragraph.
In very good browsers (Mozilla-based or even Internet Explorer), the main menu items (“File” and “Links”) can be accessed at any time from keyboard by pressing ALT-F or ALT-L. Note that some keybindings (such as ALT-F) can't be blocked in Internet Explorer so you'll also get to open the browser menu. We have found no workaround for this bug in IE.
The next section describes in greater detail how a menu item is composed and what features you have in order to create fully customized menus.
