Home arrow JavaScript arrow More Top jQuery Plugins for Menus
JAVASCRIPT

More Top jQuery Plugins for Menus


jQuery is a cross-browser JavaScript library that has gained popularity for the way in which it simplifies tasks such as adding AJAX, performing animations, traversing HTML documents, and more. The power of jQuery can be extended via plugins. Luckily, the Web is filled with jQuery plugins that specialize in different areas. Today we will offer up some details on jQuery plugins that can help you add enhanced menus to your sites to provide improved navigation in terms of design and functionality. We have already done a piece on this subject in the past, but this one offers even more variety to give you an extra sampling of what is available on the topic.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
January 30, 2012

print this article
SEARCH DEVARTICLES

jQuery is a cross-browser JavaScript library that has gained popularity for the way in which it simplifies tasks such as adding AJAX, performing animations, traversing HTML documents, and more. The power of jQuery can be extended via plugins. Luckily, the Web is filled with jQuery plugins that specialize in different areas. Today we will offer up some details on jQuery plugins that can help you add enhanced menus to your sites to provide improved navigation in terms of design and functionality. We have already done a piece on this subject in the past, but this one offers even more variety to give you an extra sampling of what is available on the topic.

jQuery Accordion Image Menu Plugin

If you want to know which plugin offers the best looking menus out of this list, the award would have to go to the Accordion Image Menu Plugin by the folks at Web Argument.  Sites that emphasize images or entertainment would be complemented by this plugin, as it lets you create an accordion style menu that uses images as the background.  Beyond the impressive look of the menu, various animation effects can also be implemented via jQuery UI Effects, such as back, bounce, and swing. 

Link: http://web-argument.com/2011/03/07/jquery-accordion-image-menu-plugin/

jQuery Vertical Mega Menu Plugin

If your site has a lot of pages, this is one plugin you should consider when it comes to creating a large, yet organized menu.  The vertical style of the menu is advantageous for certain sites, and the fact that each menu item extends to several submenus once hovered over with a mouse cursor helps with reducing clutter.  The plugin uses standard HTML nested lists to create the mega menus, and the customization options are impressive.  You can set the number of sub menus you want per row, as well as implement an animation effect at the speed of your choice.  You can also set how you want the menu to expand, either to the left or right.

Link: http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/getting-started/

jQuery Mega Drop Down Menu Plugin

This jQuery menu plugin comes from the same source as the previous one in this list.  The major difference is that it supplies you with the power to create horizontal menus.  It also uses standard HTML nested lists and comes equipped with several features.  You can set the number of items per row, the animation effect and speed, and choose if you want a mouse hover or click to activate each menu item.  As with its vertical predecessor, this pluginís use of a mega menu design is helpful because it lets visitors see more options at the same time.  When they arenít looking to navigate via the menu, the menu sits on the page in its condensed form to conserve space.

Link: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

jQuery One Page Navigation Plugin

There are situations where one-page sites can come in handy.  If you happen to have one and want to add some nifty navigation and smooth scrolling, this plugin is the one for you.  As you click each navigation button, the page scrolls smoothly to that direct section.  In addition, the plugin also offers functionality that will automatically highlight the section that represents the visitorís desired destination.

Link: http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

Image Hover Move

The effect achieved through this jQuery plugin is simple, but it does help spice up menus.  Itís especially useful for sites that are geared more towards imagery than content due to its design.  When you hover your mouse cursor over each menu item, the image performs a sliding animation.  

Link: http://www.htmldrive.net/items/show/605/Image-Hover-Move-simple-and-practical-navigation-or-featured-image-jQuery-plugin

Mobilyblocks

If you have a site that focuses on photography, this plugin is a great choice.  It allows you to create an unordered list as an animated circle, and it really takes the creativity of menus to another level.  Only 2KB in size, use this plugin to wow your visitors right from the start.

Link: http://playground.mobily.pl/jquery/mobily-blocks.html

jMenu

Horizontal navigation and unlimited sub-menus are the name of the game when it comes to the jMenu jQuery plugin.  It uses nested lists and is characterized by clean markup.  Nifty effects like fadeIn and slideDown are supported as an added bonus.  The plugin offers many customizable options to give you design and functionality that is just right.  Best of all, its design is one that would fit well on a professional or leisure site.

Link: http://www.myjqueryplugins.com/jMenu

Accordion Menu Using jQuery

An accordion style menu is a great way to improve the look and feel of a siteís navigation, and this plugin offers just that.  It comes with two options that differ in their functionality.  The first activates menu items by mouse clicks, while the second simply requires a mouse over for further menu options to appear.

Link: http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

Memu Ė A Simple CSS/JavaScript/jQuery Menu

The author of this plugin offers a simple menu that can work with any type of site.  You can use the menu with or without jQuery.  Give it a try if you are looking for something that is simple and not flashy.

Link: http://codebrewery.blogspot.com/2011/01/memu-simple-css-javascript-jquery-menu.html

Superfish jQuery Menu Plugin

The Superfish plugin uses a CSS drop-down menu as its basis and adds a host of enhancements.  For example, users can tab through sub-menus with their keyboards.  In addition, thereís animation of sub-menus, hover support for Internet Explorer, drop shadows, callback functions, and more.  The plugin allows you to create different types of menus to coordinate with different websites, including a basic style, vertical style, or nav-bar style.

Link: http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

ContextMenu Plugin

While standard menus that help you navigate sites are extremely important, context menus that offer options to do things such as Open, Save, or Delete are an integral element of design as well.  The ContextMenu plugin is a jQuery plugin that lets you take the browserís standard right-click menu, override it, and implement one that reflects your own style.  The plugin is lightweight, fully stylable, and offers plenty of useful features.  You can bind menus to multiple elements, assign context-sensitive callbacks, and even use more than one menu per page.

Link: http://www.trendskitchens.co.nz/jquery/contextmenu/


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials