20+ Powerful jQuery Menu Plugins And Tutorials

In this post, I am showcasing a number of useful jQuery menu plugins. They can help you dramatically improve your website navigation and the usability.


As you probably know already, the first few seconds that new visitors spend on your website have a massive effect on whether they will stay or not. Navigation is an essential element in web design, and it has a large impact on the usability. A poor menu can even drive your visitors away if they can’t find what they are looking for. Therefore, your website navigation should be neat, user-friendly and creative at the same time. Ideally, you should have a enjoyable main menu that will allow quick and easy site navigation. More importantly, it should also make your visitors comfortable while they are surfing your website. Your navigation menu then should be in a style that users either already understand or will easily learn.


Once you are done browsing, let me know about your thoughts by adding your comments below. If you find this post useful, please share it with your friends, as well.


Memu – A simple CSS / JavaScript / JQuery Menu – MORE INFOmenu-jquery

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery. It has feature so that when visitors are navigating your site, the selected item will stay highlighted.

UberMenu – WordPress Mega Menu Plugin – MORE INFOuber-menu jQuery menu plugins

This is a responsive, user friendly and highly customizable mega menu plugin created for WordPress. It is simple to start with this plugin as it works right out of the box, yet it is potent enough to create creative and highly customized mega menus.

Mega Menu Complete Set – MORE INFOmega-menu jQuery menu plugins

This complete set is ideal if you want to create unique menus. It features 13 color variants and 9 jQuery effects. The menu is based on custom grid and will allow you to organize contents into columns.

Superfish – Free jQuery Menu Plugin – MORE INFO

superfish-jquery-menu


Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

Titan Menu – Powerfull Dropdown Menu – MORE INFO

titan-jquery-menu


This is a powerful menu plugin build on CSS3, HTML5 and jQuery. It comes with 11 fresh styles and good layout customization (buttons, bar and stack)

Nice Tree – JQuery Tree Plugin – MORE INFO

nice-tree-jQuery-plugin


An easy to install JQuery Plugin that contains more options than most users will ever need. This plugin takes your HTML and turns it into a collapsible menu system with endless numbers of menus within menus. Works great with all major browsers e.g. Chrome, Safari, Firefox and even IE.

jQuery Push Menu – MORE INFOjquery-push-menu

This jQuery navigation menu plugin is cross browser compliant and mobile ready. It features adjustable parameters, sliding menu level items among others, and you can easily embed forms, images videos and others.

JQUERY MENU MOVING BOXES CONTENT – MORE INFOmooving jquery menu plugins

It’s really sweet animations using jQuery. The idea is to have small boxes scattered around the top of the site and when a menu item is clicked, animate boxes to form the main content area. We’ll use some different animation effects that we will add any additional options to the menu item.

Metro Flexible Navigation – MORE INFO

metro-flex-navigation


The Metro Flexible Navigation is a simple, clean grid layout looking a lot like the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and drag-able at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.

jQuery Animated Button & Menu – MORE INFOanimated-button-and-menu

This plugin will allow you to replace links grouping and animated buttons easily into your drop down menu.

Menu Master Custom Widget –
MORE INFOmenu-master

This plugin for WordPress will allow you to add a jQuery sidebar menu widget. It features user friendly menu layout editor in creating a menu in admin. Please note that if you like to add sub items, you should incorporate them as HTML in a popup.

jMenu – MORE INFOjmenu

This is a jQuery plugin that will allow you to generate horizontal navigations with infinite submenus. It utilizes nested lists so the menu markup is quite clean.

Cursor Following Menu – MORE INFOcursor-following-menu

This is a navigation menu that will always follow your cursor. It was generated using CSS and jQuery library, which is easy to configure and implement. The script features CSS styling, 2-level navigation and simple markup.

HorizontalNav – MORE INFOhorizontalnav

This is a jQuery plugin that will span a horizontal navigation menu to fit the entire width of its container. Creating this effect is quite annoying but with HorizontalNav, the task becomes much easier, even with a responsive design.

jQuery Live Menu – MORE INFOlive-menu

This is a jQuery plugin that will allow you to easily create animated and nice menus.

jQuery iNav – Products Showcasing Navigation – MORE INFOinav

jQuery iNav is a plugin that will allow you to create amazingly animated menus or showcase items. This jQuery plugin can introduce your site to a JavaScript navigation that is very powerful.

Sticklr – Sticky Side Panel CSS3 + jQuery Plugin –MORE INFOsticklr

This plugin has an added custom tab size option feature and an improved capability for a tab to be used as link.

Mac Style Dock Menu in jQuery and CSS – MORE INFO

mac-style-menu


If you are a big Mac fan, you will love this CSS dock menu. It comes with two dock position: top and bottom.

jQuery Smooth Scroll – MORE INFOjquery-smooth-scroll

This plugin will allow your anchor text to smooth scroll. It is based on the Cudazi “scroll to top” and can be used if you need this feature in your website.

jMenu jQuery menu plugin – MORE INFO

jmenu


jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library. The markup of the menu is pretty clean as it makes use of nested lists.

EXPANDING IMAGE MENU WITH JQUERY – MORE INFOExpanding-Image-Menu-with-jQuery-540x225

This is an image menu expansion with jQuery. The idea is to have some columns with slices of black and white content area will be a drag when you click on them. It also slide in the version of the image color, creating an effect ordered.

ANIMATED CONTENT MENU WITH JQUERY – MORE INFOanimated-context-jquery-css-navigation

There is a menu with a slick animated feature enjoyable on hover. The idea is to drag certain items, modify and animate the background color of the item and then drag the items back with a different color.

JQUERY HOVER ANIMATION MENU – MORE INFOjquery-menu-animation-plugin

jQuery plugin (2KB) that allows you to create an unordered list as an animated circle.

SIMPLE NAVIGATION WITH CSS3 AND JQUERY – MORE INFOA-simple-navigation-menu-built-with-CSS3-and-the-jQuery-UI

It is a simple navigation menu built with CSS3 and the jQuery UI.

ANIMATED TEXT AND ICON MENU – MORE INFOanimated-text-icons-menus2

This is a menu with the black animated content with jQuery for a themed restaurant. Menu items will be moderated and when clicked, a content area with more information will appear. Furthermore, it is the background image will change that menu item was clicked.


Leave a Reply