The Perfect Multi Level Accessible Accordion Menu

24 February 2015

The Perfect Multi Level Accessible Accordion Menu

 This article is an old post which I have updated with fresh information for 2015. The top rated accordion menu system has changed since this article was first written, and new candidates for the perfect accordion menu have been added.

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 accommodate 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:

  1. Pure CSSand jQuery based
  2. Constructed using nested ul and li tags(worth 2 marks)
  3. Search engine friendly
  4. Ability to remember state across pages, (or insert a css style to indicate expanded items) (worth 2 marks).
  5. Able to support any number of levels(worth 2 marks)
  6. Cross browser - work inall browsers from ie6 onwards with graceful degredation for unsupported browsers
  7. Keyboard accessible using Tab and Enter  (partial support means it might be possible by hacking the CSS file)
  8. Keyboard accessible using cursor keys and enter
  9. Option for automatic sublevel indicator image or css sprite which has open and closed submenu states.
  10. Animated open and close actions
  11. Option for closing previously opened submenu when a different submenu is clicked or keep all panels open
  12. Able to embed more than one accordion menu on the page at once.
  13. Has event handler for 'close all' and 'open all' links
  14. Can create external links to open single panel
  15. Is free (worth 2 marks).
  16. Easy to customise appearance in CSS.
  17. 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

SuperSimple Accordion Menu - great little menu using a lightweight 0.5k javascript file. Supports many features.

The Code Player walkthrough menu

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

Feature number: 1 2* 3 4* 5* 6 7 8 9 10 11 12 13 14 15* 16 17 Total
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
jQueryCommon Accordion Y N Y Y P Y N N N Y N Y N N Y Y Y 12
jQuery UI Accordion Y N Y Y N Y N N Y Y N Y N N Y N N 10
JStree Y Y Y Y Y Y Y Y Y Y N Y N N Y N N 16
MLA Menu Y Y Y Y Y Y N N Y Y Y Y N N Y Y N 16
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
The Code Player Y  Y  Y  Y  19 

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 ?, could make it a winner.

 The winning system now is the code player menu which has simple jquery interface. However to get some of the features to work, you need to know a little bit of jquery, but there is pleny of help in the support pages of the site. The only feature that it does not support out of the box is an option to make horizontal as well as vertical menus. 

Having reviewed hundreds of different jquery accordion menus, I've not yet found one capable of getting the maximum 20 points. Adi Palaz comes very close and the code player is the closest one, 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 .