** Update 26th Feb 2015
This article has been updated with one important new test: menus are now judged on whether they are responsive. This is a key criterion for modern responsive webistes. There is also a couple of new entries to the list, and a new winner!
I've now published a review of the perfect multi level accessible accordion menu to accompany this review.
What is a CSS Menu?
Recently, I've been looking for a lightweight CSS-based menu to use with our new generation of websites. All websites are built using a single CMS system which stores each website as a collection of pages and folders. The application interprets this collection builds the websites including dynamic url rewriting . The navigation for each website is generated as a series of nested ul li tags in the rendered HTML. The website itself interprets this html code into a navigation system. A different navigation system is used for each site, and the design of the navigation can be modified by the CSS.
This sounds like a relatively simple task, but there are a number of basic functions that the CSS based menu needs to accomplish. These are:
- Full Accessbility (cross browser, search engine accessibility, full keyboard accessibility and graceful degredation).
- Multi-level menu - ie the ability to have submenus up to n levels. These menus are built using nested ul and li tags.
- Ability to create both vertical and horizontal menu systems using the same code.
CSS menu maker - a web based system used to build CSS menus. The system also have a number of templates that include attractive designs for making horizontal, tabbed or vertically based menus. It also includes dreamweaver and wordpress plugins. Note: this is one of the many sites that have officially dropped support for IE6. The site also has a cool online menu generator which you can use for free, although there is only a limited number of templates which support multiple level menus.
Pro Dropdown Menu v3 by Stu Nicholls - Stu Nicholls is a very prolific developer and has quite a few jQuery menu systems showcased on his website, this one was selected from the many available. Check out the link to see more great looking menu systems.
Drop Down Tabs - Dynamic Drive - this is a very lightweight script used to change ul li lists into tabbed navigation. It's very easy to impliment and works on just about any browser you can throw at it. The UL list has to be wrapped in a div, rather than applying a class to the top level tag.
Menu Dynamique - Developed by a French Web Design company, this menu is really good. The demo has a slight bug in IE6, but that's easily fixed with a CSS hack, as with most IE6 implimentations of CSS menus. The guy who made his menu no longer works for the company, but the code is available to download and do with as you will.
jdMenu Hierarchical Menu - a great little menu, which sadly no longer seems to be supported. This one has a lot of features including vertical and horizontal support, submenu indicator and partial accessibility (for top level items only).
Accessible Foldout Menu - standards compliant accessible menu using tab and enter keys (but not cursor keys) to access sub menus and fallback CSS option for degredation. Great potential with this one- if it had submenu indicators, it would be very high up in the list.
Chrome CSS dropdown Menu - basic menu, but included because it has options which change the menu hover effects.
Son of Suckerfish - as the name suggests, this is an extension to the suckerfish menu above written by Patrick Griffiths and Dan Webb . It includes all the original suckerfish features and adds support for mulitlevel drop downs. The only slight issue with multilevel support is that you need to specify a class in the li tag to enable submenu indicators. therefore, it loses a point in this aspect.
Smooth Navigational Menu - nice looking menu that has a slide and fade animation on mouseover. you can also add drop shadows on the menu layer. The best feature of this menu is that you can put the contents of the menu in a separate html file, and call it via ajax.
Adi Palaz Accessible Menu - Another Suckerfish based menu, this combines approaches from two different menu systems into one. It has good cross browser support. Keyboard accessibility using tab and enter work well, sadly no cursor keys navigation, and the submenu indicator is not automatic, otherwise, its a very good menu.
ADxMenu - very simple CSS menu system that uses custom JS to circumvent the IE6 issue. Supports drop up as well as drop down menus, and multi level submenus.
Superfish - this is a new addition to the review, and is a strong contender, with support for multi levels, vertical and horizontal, plus integration with other jQuery plugins (like HoverIntent which can change the way hover states are displayed) and support for drop shadows, its a very interesting prospect. The updated version of this menu includes support for touch devices including IE10 touchscreen.
Smart Menus - Describes itself as 'possibly the most advanced website menu script today' and I have found little evidence to contradict this statement. Smart Menus is a fully featured modern css menu that includes responsive layout support, full keyboard accessibility and provides all the features of the menu even on the free version.
There were plenty more jQuery based CSS menus that did not make it on the list because they do not fulfil enough criteria, or because I didn't have time to search for more, so this is a selection of the closest ones that I've found that fit the requirements.
The table below shows the reported features that the menus include. Please not, I did not really have time to verify cross browser compatibility or all features:
The full list of desirable features are as follow:
- Cross browser : must support IE6+, Firefox 2+, Chrome, Safari 3+ , Opera 9+. Browser hacks are acceptible eg using *html for IE6.
- Simple Keyboard Accessiblity - using tabs and enter.
- Full Keyboard Accessibility - using cursor keys, tabs and enter.
- Unlimited levels - supports any level of menu (although unlikely that more than 6 levels will ever be needed).
- Option to automatically add indicator when menu node has submenu attached.
- Option to render menu from ul li tags - preferably use ul li tags as default.
- All presentation in CSS file - this includes relative positioning of the submenu, or minimum submenu widths.
- Animated submenu .
- Option to control how submenu appears (slide, fade, etc).
- Ability to put more than one menu on a page .
- **new ** menu has to be responsive and work in different browser widths
key: Y =yes , N =no, P =partial support (worth 0.5 marks )
Finally, after years of searching I've found the holy grail of accessible drop down menu systems. Smart Menus includes everything you need to make an accessible CSS based drop down/flyout navigation system based on jQuery and best of all it's FREE!
Note on UI Usage of Drop Down navigation
There are many UI designers who would argue that the use of multi level drop down/fly out menus are bad design. In many cases, that is correct, and in general having more than one level of CSS menu can be difficult to use. When organising information, it is better to use fewer more generic categories, and to provide clear methods of navigation- preferably, using a single line of links for primary navigation or more creative navigation methods. However, there are times when having multi level menus are useful, and this is one of the many scenarios for which the univeral CSS menu needs to cater for. There are also cases where using tree menus for organising information are better. Tree menus are not considered in this discussion because they are only suitable for vertical menus.