Finding all Perfect Responsive Multi-level Dropdown CSS Menus

[Full list by Myke Black (@mykeblack), Update 26th Feb 2015]

The WINNER is 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.

About SmartMenus 0.9.7, Myke Black wrote:
"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!"

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.

The table below shows the reported features that the menus include.

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 .
  15. **new ** menu has to be responsive and work in different browser widths

 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 15  Total
CSS menu maker Y N Y N N Y Y N Y N Y N N Y Y 8
Pro Dropdown Menu v3 Y Y Y N N Y Y Y Y Y N N N Y N 9
Drop Down Tabs Y Y Y N N Y N N Y Y N N N Y Y 8
Menu Dynamique Y Y Y N N Y Y N Y Y Y Y P Y Y 11.5
jdMenu Hierarchical Menu Y Y Y P N Y Y Y Y Y Y N N Y N 10.5
Accessible Foldout Menu Y Y Y Y N Y Y N Y Y N N N Y N 9
Chrome CSS dropdown Menu Y Y Y N N Y N N Y Y N N N Y N 7
Son of Suckerfish Y Y Y N N Y Y N Y Y Y N N Y N 9
CSS drop-down menu framework Y Y Y N N Y Y N Y Y Y N N Y N 9
Smooth Navigational Menu Y Y Y N N Y Y Y Y Y Y Y N Y N 11
Adi Palaz Accessible Menu Y Y Y Y N Y Y N Y Y Y N N Y N 10
CSS3 Menu Dropdown Y Y Y N N Y Y N Y Y Y N N Y N 9
Menumatic N Y Y Y P Y Y Y Y Y Y N N Y N 11
ADxMenu N Y Y N N Y Y N Y Y Y N N Y N 8
Superfish Y Y Y Y N Y Y Y Y Y Y Y Y Y N 13
Smart Menus Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y 15 

17,812 1 5