Sample Horizontal DHTML Menu
The HTML contains list markup (
onload function dynamically inserts the nested submenu lists and mouse events using W3C standard DOM methods (no
innerHTML). The only proprietary code is for IE's non-standard event handling.
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.
Return to An Accessible DHTML Menu
- 03 March 2005: rewrote JS to use DOM methods instead of
document.write, and eliminate
These revisions mean some browsers that previously handled the menus no longer do. Those browsers include WinIE 5.0, MacIE5, and Opera 6. These browsers are obsolete, anyway. Besides, those users get a perfectly usable main menu, so it's OK.
- 18 June 2004: added archive downloads
- 2 October 2003: removed
@media handheldin favor of
@media screenfor hiding CSS from mobile devices and some CSS-deficient browsers.
- 2 October 2003: revised style rules for