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?
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.
The table below shows the reported features that the menus include.
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 )
|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|
|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|