The Perfect Multi Level Accessible Accordion Menu
I've been looking at upgrading some of my websites to use more functional accordion menus. Accordion menus are lists of links with sublists that open and close beneath then. Unlike DropDown menus , the items in an accordion menu move to accomodate the content. Accordion menus can be either vertical or horizontal, although horizontal accordion menus are much more common.
To find the perfect multi level accessible accordion menu, I've defined a set of criteria. Each menu will be measured against this criteria list, and the one that matches most of the requirements will be the winner. The criteria are as follows:
- Pure CSSand jQuery based
- Constructed using nested ul and li tags(worth 2 marks)
- Search engine friendly
- Ability to remember state across pages, (or insert a css style to indicate expanded items) (worth 2 marks).
- Able to support any number of levels(worth 2 marks)
- Cross browser - work inall browsers from ie6 onwards with graceful degredation for unsupported browsers
- Keyboard accessible using Tab and Enter (partial support means it might be possible by hacking the CSS file)
- Keyboard accessible using cursor keys and enter
- Option for automatic sublevel indicator image or css sprite which has open and closed submenu states.
- Animated open and close actions
- Option for closing previously opened submenu when a different submenu is clicked or keep all panels open
- Able to embed more than one accordion menu on the page at once.
- Has event handler for 'close all' and 'open all' links
- Can create external links to open single panel
- Is free (worth 2 marks).
- Easy to customise appearance in CSS.
- Can be used horizontally or vertically
I've weighted items 2,4,5 and 15 as 2 marks because there are the most important features.
Most jquery based accordion menus are pretty similar in operation, but few match more than 6 or 7 of the criteria, so if a menu is obviously lacking, it will not be included in this list.
The candidates for the perfect multi level accessible accordion menu are as follows:
AccordionMenu Script v1.7.1 - very fast, smooth accordion menu which I've used many times before
AdiPalaz Nested Accordion - Real box ticker this one, supports nested menus, menu indicators, and has nice fade effects on animations. Can also be constructed using either nested divs or ul lists. Also has option to move clicked item to top of the list.
BassistanceTree Menu - lovely tree menu system than converts nested lists into a tree menu-like structure.
DesignChemical Vertical Accordion Menu Plugin - just one of the many great jquery plugins on this website, you should definately visit. This menu supports multi level, persistant menu state, click or hover events, selective disabling of parent links, count of child links, and more. There is also a version that integrates into Wordpress.
jQueryAccordion by Roshan Bhattaria - simple but effective tutorial showing how to make a nice little accordion menu.
jQueryCommon Accordion by Marghoop Suleman - supports both horizontal and vertical menus, autoplay slides, and has very nice animations on the slides.
jQueryUI Accordion - beautiful accordion menu system, but is a little tricky to style up if you don't want to use the jQuery UI CSS themes. Also, does not support multiple opened panels. Has a nice sorting drag and drop feature though, and you can resize the menu using a drag icon in the bottom corner.
JStree - Another jquery based tree menu. Benefits from enhancements like drag and drop support, ajax loading, inline editing, checkbox support, keyboard navigation and search functions.
MLAMenu (multi level accordion menu) - very nice accordion menu system which has sub level indicators and flexible options.
I-MarcoSimple jQuery Accordion Plugin version 3.1 - the latest version of this menu now supports a limited number of nested accordions, panels with any html content, and expanded classes.
Scriptbreaker jquery multi level accordion menu - simple but effective. Supports sublevel indicators and accordion/panel behaviours.
SherpaComplete Navigation System - Not just an accordion menu, but the samesystem can be used to make drop downs, sticky footer, slide ins, sidebars, mega menus and all sorts of loveliness using a single system. Three downsides to this though, first, it costs £8 each time you need to use it, second, having the ability to create all these different menu types using one code base meansit won't be lightweight, and third, I'm not sure how easy it is to style up the menu (not paying 8$ just to find this out). but the concept is really interesting and well work a look-in.If it werre free, I would definately consider replacing the different drop down, accordion and sidebar navigation systems in my cms to have just the one nav system which can be configured in the CMS to work in a number of different ways.
SimpleAccordion w/ CSS and jQuery by Soh Tanaka - beautiful menu, but does not support nested lists. If you only want a single level accordion (which suffices for the majority of navigation systems anyway) this is a definate one to look at.
Simpleand Beautiful jQuery Accordion - really this is a tutorial to make a menu, but you can use the demo to make your own. The indicators are super fast CSS sprites.
Stickman labs Accordion v2 - brilliant menu system that supports nested vertical menus within a horizontal menu. Only downside is that it uses the scriptaculous api rather than jquery
Each menu above was tested against the required features and one mark is scored for full support for each feature. Half a mark is awarded for partial support of a feature. Essential features are worth 2 marks, and a partial match to an essential feature is worth 1 mark.
The results are as follows:
key: Y =yes , N =no, P =partial support (worth 0.5 marks )
* = essential feature, worth 2 marks
|Accordion Menu Script v1.7.1||Y||Y||Y||Y||N||Y||Y||N||Y||Y||Y||Y||Y||Y||Y||Y||N||17|
|Adi Palaz Nested Accordion||Y||Y||Y||Y||Y||Y||Y||N||Y||Y||Y||Y||Y||N||Y||Y||N||18|
|Bassistance Tree Menu||Y||Y||Y||Y||Y||Y||P||N||Y||Y||N||Y||Y||N||Y||P||N||16|
|Design Chemical Vertical Accordion Menu Plugin||Y||Y||Y||Y||Y||Y||P||N||Y||Y||Y||Y||N||N||Y||N||N||15.5|
|jQuery Accordion by Roshan Bhattaria||Y||N||Y||N||N||Y||N||N||Y||Y||N||Y||N||N||Y||Y||N||9|
|jQuery UI Accordion||Y||N||Y||Y||N||Y||N||N||Y||Y||N||Y||N||N||Y||N||N||10|
|I-Marco Simple jQuery Accordion Plugin||Y||Y||Y||Y||N||Y||Y||N||N||Y||Y||Y||N||N||Y||Y||N||14|
|Scriptbreaker jquery multi level accordion menu||Y||Y||Y||Y||Y||Y||P||N||Y||Y||Y||Y||N||N||Y||Y||N||16.5|
|Sherpa Complete Navigation System||Y||Y||Y||Y||Y||?||?||N||Y||Y||Y||Y||?||?||N||?||Y||13-18|
|Simple Accordion w/ CSS and jQuery||Y||N||Y||Y||N||Y||P||N||Y||Y||N||Y||N||N||Y||Y||N||11.5|
|Simple and Beautiful jQuery Accordion||Y||Y||Y||Y||N||Y||P||N||Y||Y||N||Y||N||N||Y||Y||N||13.5|
|Stickman labs Accordion v2||N||N||Y||Y||Y||Y||N||N||N||Y||Y||Y||N||N||Y||Y||Y||14|
|Super Simple Accordion Menu||Y||Y||Y||Y||Y||Y||Y||N||N||Y||N||Y||N||Y||Y||Y||N||16|
There are 2 potential winners in this review. One of the menu systems, Sherpa, could not be fully evaluated since I don't have a working demo to test, and you have to pay to get the code. This system, if it supported all features marked with a ?, would be the joint winner. The winning menu system, adi palaz, fulfils nearly all the requirements. The only items that it does not support are cursor keys accessibility, the option to create vertical menus, and a simple way to create external open and close links for single panels (although you can create this functionality if you know jquery). According to the author, full keyboard access will be built in to the next version, but there is no news as yet when this will be (I'll update this page when the next version is realeased).
Having reviewed hundreds of different jquery accordion menus, I've yet to find one that gets the maximum 20 points. Adi Palaz comes very close, but as with my search for the Perfect Accessible Multi Level CSS Menu , I've not found the perfect one yet. If anyone knows where I could find a perfect accordion menu, or indeed a perfect css drop down menu, please contact me via my online contact form .