World class Undelete and renowned raid recovery services
WestNIC provides reliable web hosting services
SGD Networks offers Web Hosting, Web Hosting Hyderabad
Ahosting.biz reseller hosting, managed dedicated server with 24/7 support
This page is part 2 of an article that demonstrates a DOM1 visibility drop down menu system. Each menu has a main link and an unordered list of links that become visible, with the illusion of extending the main menu point downwards. The drop down menus are open source, accessible and forward compatible.
The scripts and CSS for these drop down menus is provided under a Creative Commons License.
These menus also implement tab navigation in supporting browsers by placing tabindex attributes on each link. These are combined with Javascript onfocus and onblur event handlers that control the menus in the same way as the onmouseover and onmouseout events respectively. If you press the tab key on your keyboard, the first menu heading should be selected and the menu list will open. Subsequent tabs will select each item in the menu list, then select and open the second menu and continue to the last. Press enter to open a selected link. Press shift+tab to move backwards through the items.
The main menu builder script includes a couple of workarounds to address slight inconsistencies in the way that Opera 4.0 and Internet Explorer 5.0 handle the CSS z-index property and the DOM1 .style.visibility property respectively. Both workarounds use browser-neutral condition checking to be meticulously fail-safe and don't affect the script's DOM1 compatibility.
This page has been tested and successfully debugged in the following browsers. The scripts are compatible and fully supported by the DOM1 enabled browsers in the Supported column.
| Browser | Compatible | Supported |
|---|---|---|
| Internet Explorer | 3.0, 4.0 | 5.0, 5.5 |
| Firefox | 0.8, 0.9.1 | |
| Mozilla | M15, 0.9.3, 1.3.1 | |
| Netscape Navigator | 3.04, 4.5, 4.73 | 6.0, 7.1 |
| Opera | 3.62 | 4.0, 5.0, 5.11, 6.0b, 6.01, 7.11 |
| Safari | 85, 94 |
Netscape version 7.1 is based on Mozilla version 1.4. Firefox is also based on the Mozilla browser.
It has been reported that the standard Code Style stylesheets crash Netscape Navigator 4 on Windows XP and Windows 2000 when viewed with this page. These style sheets have since been hidden from Netscape 4. It has also been reported that the Mac Safari browser does not render this menu system accurately; the menus appear twice, slightly offset (Safari screen shot, 60KB). However, Safari version 85 and 94 are reported to render the menus successfully.
If you encounter a problem with this page using a browser not listed here, please use the article feedback form below to submit a report.
This is the second of three parts to this article, follow the links below for the other parts.
Answers to common questions about the drop down menu system.
Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.