Sample Horizontal DHTML Menu

embedded link, embedded link, embedded link, embedded link, embedded link, embedded link, embedded link, embedded link, embedded link.

The HTML contains list markup (<ul>) for the main menu navigation links. A JavaScript onload function dynamically inserts the nested submenu lists and mouse events using W3C standard DOM methods (no document.write, no innerHTML). The only proprietary code is for IE's non-standard event handling.

The script relies on the main menu items being already present in the HTML. This means that those users who don't have JavaScript enabled or browsers that don't support the DOM will get just the main menu that's already in the HTML.

For this reason, it is important to have the main menu items going to real pages and not just use them as triggers to show the submenus. The pages these links go to should contain links to any submenu items. This keeps the site accessible, regardless of the visitor's browsing environment.

Mouseover/out events are used to toggle the display property of the submenu between none (hidden) and block (visible). There is a belief in some circles that the submenus should also toggle onfocus/blur, via tabbing through links on the page. I haven't seen any documented proof that this is good for accessibility and personally don't think it is. Thus, I have not implemented that functionality, though it should be easy to add.

This sample page structurally places the menu after the page content, which is considered more logically sound and better for accessibility than having the menu first. The "embedded" links just after the page heading are there simply to test that when links within the body share space with the positioned menus, both the menu links and embedded links function as expected. Also, the label of the 3rd main menu link should line wrap and the effects it causes can be observed.

The files for this page are:

Required Customizations: the imported stylesheet, menu data JS, and the "navbar" div (main menu) within the HTML.

Download the set (including this page) as a zip archive or a tar.gz archive.

Try also the sample vertical DHTML menu. The two menus use the same JavaScript code. Styling and the HTML structure are the big differences. Thanks to CodeStyle.org for the original base code.

Return to An Accessible DHTML Menu

Revisions