jQuery Menu Roundup

Posted on November 19, 2008

“Whats a good jQuery menu?” is a question I hear quite frequently on blogs and forums. As jQuery is such a simple language to learn, most people code their own for their own sites. I’ve compiled a list of 3 menu plugins, and and 5 ‘custom’ solutions that people have setup.

http://p.sohei.org/jquery-plugins/menu/
Latest release: Jan 07

This plugin was constructed to emulate a desk top apps menu. They don’t close until clicked off and are activated by clicking them (rather than hovering). It requires the jQuery dimensions plugin to perform ‘smart calculations’.

Example Usage: http://p.sohei.org/stuff/jquery/menu/demo/demo.html
Download: http://p.sohei.org/jquery-plugins/menu/

http://jdsharp.us/jQuery/plugins/jdMenu/
Latest release: April 08

Although the jdMenu plugin is only 3kb itself, it depends on or looks a hell of a lot better with the plugins dimension, positionBy and bgiframe. jdMenu boasts keyboard access and can be easily made into a verticle menu by changing an option.
Example Usage & Download: http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish/
Latest release: Sometime in 08

Superfish takes a CSS based dropdown then enhances it with jQuery so if the user has Javascript disabled, it degrades perfectly well. Since the menu is mainly CSS based, I’d imagine it’s a fair bit faster than the other options.

Example Usage: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#download

More menus

Plugins are useful, but a lot of the time you don’t need their full functionality. If your confident of modifying a few scripts, then taking something like http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery and changing it to meet your needs would be the best way to go. That being said, the plugins have dropshadows and funky multi level code that some of the ‘smaller menus’ do not.

Leave a Reply

You must be logged in to post a comment.