The ultimate drop menu
ADxMenu - multilevel menu built from nested HTML lists - is my pride and joy. I began working on it last year, always implementing the good stuff I learned on the web standards road. In its current incarnation, I believe it’s best of the breed. There are other menus out there (using the very similar HTML base), but most of them can, at most, measure up to ADxMenu standard.
With that said, I want to repeat what was my target from day 1. It’s valid, standard-compliant web sites. If you have an old-school web site with nested tables and no DOCTYPE - do not bother; you have other things to conquer first. On the other hand, if you are a CSS newbie/inter/pro - you are welcomed. You will need good CSS skills to create attractive menus though; I did my best to give you a good starting point, for 4 different variants of the menu, but the final look is up to you.
There are many old-school menus with large scripts and over-bloated markup. Those few that are good and light are not free. ADxMenu3 is free to use on any kind of site, as long as you give proper attribution.
Versions
ADxMenu3 comes in three flavors.
Standard version is for sites with no forms (at least no select boxes in forms), and for small menus. Long menus tend to fall out of the visible part of the screen, which is not very user friendly.
Professional version builds on the standard, adding WCH implementation. That means that your menus will be placed above any form element on the page, including the select boxes in IE (the usual problem). Again, make sure your menus fit in the reasonable desktop size.
Enterprise is intended for sites with long submenus. For sites where you must be sure that menu stays visible. It includes additional scripting which checks for menu position and moves it in the opposite direction if it’s off-screen. It’s clearly the best choice for commercial sites, unless you are sure that your menus will always fit in the visible part. If you are, then you are better off with one of two lighter versions, as you will have smaller download foot-print.
Switching between versions is easy, as CSS and HTML markup are same for all of them. What changes is the accompanying scripts and the code you use to include the files. Instructions for all of this can be found on the Intro page.
Accessibility issues
These menus are always branded as utterly non-accessible. True, they depend on the precise movement of your mouse, thus making it inaccessible for people with disabilities, as they will have a hard time fetching items in the second or third nested submenu.
However, this is not the problem with the menu itself. It’s with the site IA designer.
Online shop is the typical example. You start with merchandise types (books, games, music etc.). Then when you click on “books” you could have Latest, Most popular, A-Z, Recommended, etc. You need to build such site to be usable with simple links - no menus or search. Only then you can think about drop menus.
So, each item that has submenu must itself be linked to a page that contains “normal” list of items from that submenu. By doing this, you solve not only mentioned accessibility issues but are also supporting older browsers. The way CSS is included (@import) prevents very old browsers like Navigator 4 or IE4 to even see the styled menu.
On the other hand, browsers like IE5/Mac or Opera 6 have decent CSS1 support, thus being able to see and load menu .css files. Due to use of CSS2 advanced selectors, they will never show the submenus, thus creating usability problems if you do not link the main items to appropriate pages.
Always think deep about your site IA. Using ADxMenu as the only source of site nav will only get you in trouble. Use it to speed navigation up. That is its purpose. That is where it shines.