The Perfect Multi Level Accessible CSS Menu

** Update 12th October 2011
I've now written a review of the perfect multi level accessible accordion menu to accompany this review.

What is a CSS Menu?

A CSS menu is one that is built entirely using CSS and HTML without javascript. These generally take the form of unordered lists (using < ul > < li > tags ) . The stylesheets are used to render the list in an attractive way, with hover states on mouseover. Often, these menus are horizontal, although vertical menus are also possible with CSS.

CSS menus benefit from being accessible and search engine friendly. Since they do not rely on javascript, they have good cross platform accessibility and degrade gracefully - ie if a browser does not support the CSS variant, or has javascript and CSS disabled, the links are still perfectly usable.

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.
   
• All presentation configured  by CSS (no javascript config files for presentation). 
   
• Ability to create both vertical and horizontal menu systems using the same code.

Having submenus requires javascript, which is unavoidable if you want to support all current versions of IE , so the decision was made to make the submenus function using jQuery, which is fast becoming the industry standard for dHTML. Even Visual Studio now includes jQuery. It is a very powerful javascript api and relatively easy to use. Other javascript APIs are available and there is a fantastic Javascript API feature comparison table on wikipedia. The main other API considered was Smart GWT (based on Google Web Toolkit ) however this only has partial degredation, and is newer and less commonly used than jQuery, so there are fewer CSS menu systems based on this. Another factor is that there are often other jQuery based elements on the page, so using the same API is preferable if possible.

Having decided on the base criteria and javascript API, the task was then to draw together candidates for the menu and compare features. Trawling through the internet uncovered the following potential candidates:

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 plugins. Note: this is one of the many sites that have officially dropped support for IE6.

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.

jQuery Suckerfish - don't know where the name comes from, but suckerfish by Myles Angell is a skeletal menu system that is easy to customise or build on. some of the other menus below are based on this system with their own implimentations.

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.

Tiny Dropdown  - even though this menu does not say it can be used as a vertical menu, one of the comments on the page mentions that it can, so I'm going by that assumption that with a little bit of tweaking it can be used as a vertical menu. The best aspect of this one is that it automatically adds a » when the node has a submenu beneath it. This CSS menu is a real box ticker. If it had full keyboard accessibility it would be the hands down winner. It uses a very tiny 1.2k javascript to render the menu - much smaller than the jquery api, but still works in all browsers that I've tested. The animation is very nice too. If you edit the javascript, you can modify the animation.

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.

CSS drop-down menu framework  - great menu system which includes iPhone support (not many menu systems specify this) and support for linear columns in the submenu which is really special. Pure CSS means that it works without javascript in all but IE6. It's only the lack of accessibility and the omission of automatic submenu indicators which let it down.

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.

Pure CSS Menu  - as the name suggest, this menu works using pure CSS and no javascript. As with all other pure CSS menus, it does not work in IE6 (because the :hover class doesn't work properly in IE6) and is not keyboard accessible. Having said that, it's a very simple, elegant and customisable menu.

Keyboard Accessible Suckerfish Menu  - I love this menu. The keyboard accessibility here is by tab and enter and works really well even when javascript is disabled , possibly the best keyboard feature of the group. With multi level support and good flexibility, it's one of the best menu systems on this page .

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.

CSS3 Menu Dropdown  - this menu has been included because its one of the new CSS3 based menus. It is actually software based so you build the menu using the software provided which is very handy because of the number of different classes that need to be put in . If you view the menu in a non css3 browser like IE8, it looks the same as any other,but viewed in firefox 3, you can see beautiful rounded corners which are rendered in CSS3 without using any images. The only slight drawback is that you have to add special classes to the li tags to signify whether it's the first item in the list or the last item in the list (the rounded corners are applied differently to the first and last items. Also, submenus are not automatically indicated, which is to be expected on non javascript menus. If you are hardcoding your menu, then this is the best non accessible pure CSS based menu you can get.

Menumatic  - menumatic is actually a mootools 1.2 menu based on the Son of Suckerfish above. It has been included in this list because it is one of the few that use cursor keys for navigation, however in tests using IE8 on the PC, the cursor keys were very buggy and the up and down keys did not work in submenus most of the time. In Firefox, it was a different story, and navigation was beautiful. The example even includes CSS3 rounded styles like the CSS3 Menu Dropdown above. This is a more complete javascript architecture which supports callbacks so you can invoke other javascript on certain events. Perhaps if the menu used the current version 1.3 of mootools, it might work in IE8, as it is, it only gets partial support for full accessiblity.

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.

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:

1. jQuery based javascript or (no javascript)
2. Cross browser : must support IE6+, Firefox 2+, Chrome, Safari 3+ , Opera 9+. Browser hacks are acceptible eg using *html for IE6.
3. Search Engine Accessble (no links or text served as javascript files).
4. Simple Keyboard Accessiblity - using tabs and enter.
5. Full Keyboard Accessibility - using cursor keys, tabs and enter.
6. Graceful Degredation - must display links and text if CSS and javascript are disabled.
7. Unlimited levels - supports any level of menu (although unlikely that more than 6 levels will ever be needed).
8. Option to automatically   add indicator when menu node has submenu attached.
9. Option to render menu from ul li tags - preferably use ul li tags as default.
10. All presentation in CSS file - this includes relative positioning of the submenu, or minimum submenu widths.
11. Can create both vertical and horizontal submenus - this option can be either in the CSS or in the javascript call.
12. Animated submenu .
13. Option to control how submenu appears (slide, fade, etc).
14. Ability to put more than one menu on a page .

 key: Y =yes , N =no, P =partial support (worth 0.5 marks )

Feature number:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Total

CSS menu maker

Y

N

Y

N

N

Y

Y

N

Y

N

Y

N

N

Y

7

Pro Dropdown Menu v3

Y

Y

Y

N

N

Y

Y

Y

Y

Y

N

N

N

Y

9

Drop Down Tabs

Y

Y

Y

N

N

Y

N

N

Y

Y

N

N

N

Y

7

Suckerfish

Y

Y

Y

N

N

Y

N

N

Y

Y

N

N

N

Y

8

Menu Dynamique

Y

Y

Y

N

N

Y

Y

N

Y

Y

Y

Y

P

Y

10.5

Tiny Dropdown

N

Y

Y

N

N

Y

Y

Y

Y

Y

Y

Y

Y

Y

11

jdMenu Hierarchical Menu

Y

Y

Y

P

N

Y

Y

Y

Y

Y

Y

N

N

Y

10.5

Accessible Foldout Menu

Y

Y

Y

Y

N

Y

Y

N

Y

Y

N

N

N

Y

9

Chrome CSS dropdown Menu

Y

Y

Y

N

N

Y

N

N

Y

Y

N

N

N

Y

7

Son of Suckerfish

Y

Y

Y

N

N

Y

Y

N

Y

Y

Y

N

N

Y

9

CSS drop-down menu framework

Y

Y

Y

N

N

Y

Y

N

Y

Y

Y

N

N

Y

9

Smooth Navigational Menu

Y

Y

Y

N

N

Y

Y

Y

Y

Y

Y

Y

N

Y

11

Pure CSS Menu

Y

N

Y

N

N

Y

Y

N

Y

Y

Y

N

N

Y

8

Keyboard Accessible Suckerfish Menu

Y

Y

Y

Y

N

Y

Y

N

Y

Y

Y

N

N

Y

10

Adi Palaz Accessible Menu

Y

Y

Y

Y

N

Y

Y

N

Y

Y

Y

N

N

Y

10

CSS3 Menu Dropdown

Y

Y

Y

N

N

Y

Y

N

Y

Y

Y

N

N

Y

9

Menumatic

N

Y

Y

Y

P

Y

Y

Y

Y

Y

Y

N

N

Y

10.5

ADxMenu

N

Y

Y

N

N

Y

Y

N

Y

Y

Y

N

N

Y

8

Superfish

Y

Y

Y

Y

N

Y

Y

Y

Y

Y

Y

Y

Y

Y

13

The CSS menu that closest matches our requirements is Superfish . This menu has almost everything, with just one small omission. Full keyboard accessiblity is not available as yet. However, that aside, this is a great CSS menu, with everything you would need.

If anyone finds any errors or outdated information in this list, or if they find a CSS based menu that ticks all the boxes that I'm looking for, please let me know on myke@mykeblack.com

thanks,

 

 

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.