30 Marvelous jQuery Drop Down Menu Plugins and Tutorials

jQuery drop down menu has been very common in almost any kind of websites nowadays. This is to provide an attractive navigation system on a web page without consuming its precious real estate. With a jQuery drop down menu plugin, you can display the important pages and subcategories of your contents at a click of your header or sidebar navigation.

Depending on your needs, you can find plugins from simple, multi-level drop downs, to one that displays a large drop down box containing numerous links in multiple columns. Also, jQuery is built to perform lightweight and fancy animations so you are can trust that your navigation menus are not only beautiful from its appearance, but also smooth and graceful and amusing in its performance.

Here are some the jQuery plugins that you can consider if you want add some life on your website. You can also find free tutorials in this post so can teach yourself how to code these animated menus if you want to. Most of these tutorials have downloadable jQuery scripts in the end so you can still grab the menus and implement them on your site if you don’t want to take the coding direction.

Also, a few of these are premium, so if you want support and fixes going forward, you can expect them from the premium items. If you find this post useful, please help us share it by clicking our social media buttons. Enjoy!

Affiliate Disclosure: Some of the links in this post are affiliate links. If you visit those links and purchase the product you find, I will earn a commission without additional cost on your part. This post is not a guideline, an endorsement or a recommendation and I encourage that you evaluate the products or services on your own before making any purchase.

Golden Menu – Responsive Flat Dropdown Menu

Golden is a Responsive Muti-level dropdown menu styled purely with CSS and enhaced with Javascript. The menu has a modern Flat UI feel and style, comes with 6 dark and light themes, can be used in any website or web application and also works well across all modern and old browsers including IE6+.

COMPLETE INFO & DEMO

golden-menu-

UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

COMPLETE INFO & DEMO

ubermenu-

jMenu : Horizontal navigations with unlimited dropdown sub-menus (Free)

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 (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists. The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

COMPLETE INFO & DEMO

jmenu-

Metro Style Dropdown Menus

It’s metro style dropdown menus designed and developed by Tahmidur Rafid. It features changeable colors, 2 styles of dropdown animation, full jQuery and compatibility, metro design style, login form and search field.

COMPLETE INFO & DEMO

metro-style-drop-down-menus-

jQuery CSS3 DropDown Menu Plugin

This jQuery drop down menu, has a CSS3 animation is driven by Animate.css.

COMPLETE INFO & DEMO

jquery-css3-drop-down-menu-plugin-

jQuery Vertical Drop-Down Menu

These scripts are two complex jQuery menu plugins with an unlimited number of submenus which are easy to integrate.

COMPLETE INFO & DEMO

jquery-vertical-drop-down-

Drop Menu

With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. It features Horizontal and vertical menus, supports div dropdown, 3 examples dropdown menus included, 3 dropdown animations, use different animation for open and close, Graceful degradation, Customizable through CSS and more.

COMPLETE INFO & DEMO

drop-menu-

Chrome-Bar Mega Navigation System

Chrome-Bar is a mega navigation system with a clean chrome styled design. It was developed using CSS3 and HTML5 to be customized to your projects needs. It comes with the following features: five different colours presets: Blue, Red, Green, Orange, Purple; functionality and design are split in to separate CSS files making it easy to customise the look and feel without breaking the system; Simple to use grid-system for drop-down content boxes and Easy Infinite sub-navigation menus.

COMPLETE INFO & DEMO

chrome-bar-mega-navigation-system-

CSS3 Clean Mega Menu

CSS3 Clean Mega Menu is simple and easy to use full-width mega menu with 6 built-in color themes. It supports up to six columns out-of-the-box. You can easily customize it adding more columns or color themes.

COMPLETE INFO & DEMO

css3-clean-mega-menu-

Smart Responsive Menu

Smart Responsive Menu is powerful dropdown menu solution that will work with mobile devices and different screen sizes. Menu relies on CSS media queries to modify menu display for different resolutions. By default, plugin changes paddings and font sizes for screen resolution higher than 480px. For less than 480px, menu changes from horizontal navigation into vertical and gets hidden behind the menu item. Due to the many differences between mobile browsers, different support for CSS, menu must use JavaScript to make up for these problems. There is no way to make menu universally work without use of JavaScript.

COMPLETE INFO & DEMO

smart-responsive-menu-

FH Mega Menu – jQuery Bootstrap 3 Mega Menu Plugin

The FH Mega Menu is a jQuery based Bootstrap 3.0+ mega menu plugin compatible with all mobile devices and modern web browsers. The FH Mega Menu coded with standard Twitter Bootstrap 3.0 codes and custom 6 color schemes (orange, blue, red, inverse, default and green) but don’t worry! you can build your own color schemes very easy! The FH Mega Menu 100% responsive layout design and retina display ready with awesome font icons! You can use Bootstrap column grid system with this plugin also you can use custom widgets like videos, Google Map’s, text widgets, tablets, media elements, carousel elements, buttons and so much more

COMPLETE INFO & DEMO

fh-mega-menu--

jQuery Horizontal Drop-Down Menu

The script is a complex jQuery horizontal menu plugin with an unlimited number of easy to integrate submenus. You can change easily its appearance via CSS. It has a feature where you can combine different effects show and hide – fade and slide; and you can easily integrate in to your WordPress website.

COMPLETE INFO & DEMO

horizontal-jquery-drop-down-menu-

jQuery Selectbox plugin (Free)

Custom select box replacement inspired by jQuery UI source.

COMPLETE INFO & DEMO

jquery-selector-box-plugin-

Pofi jQuery – Responsive Animated Menu

Pofi is a jQuery menu plugin that features 5 colors schemes, 65 animation effects, icon support, cross browser compatibility, free font, easy-to-change color, easy-to-change animation effects and more.

COMPLETE INFO & DEMO

pofi-jquery-responsive-animated-menu-

Fancy Drop Down Menus Using CSS and jQuery (Free)

This a fancy drop down menus uses jQuery animate function and CSS to put some stylish effects.

COMPLETE INFO & DEMO

fancy-drop-down-menus-using-css-and-jquery-

Universal Responsive Mega Menu

This script is a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system. It can be used as a sticky footer (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. You can switch between those 2 variants just by changing a single class. By using the example pages, you have all the necessary code ready to be used in your site. Customizing the menu require some basic knowledge of CSS and you can change the look of every part of the menu : the fonts, the colors, the sizes, etc. The script includes a few options easy to set up so you can choose which type of effect to apply (on mouse hover or mouse click, fade, slide).

COMPLETE INFO & DEMO

universal-responsive-mega-menu-

DeliMenu

DeliMenu is a pure HTML and CSS mega menu created to be simple in its design and powerful in its capabilities. DeliMenu, in addition to long link-lists, detailed description and design menus, tied notification indicators and bubbles, and its unique menu designs, it comes with a user-specific drop down that includes user details and login form. DeliMenu is cross-browser compatible and is optimized to support right to left languages as it does left to right. DeliMenu includes a detailed PDF document to walk you through utilizing all of its features.

COMPLETE INFO & DEMO

deli-menu-

Responsive Mega Menu Complete Set

This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 9 jQuery effects and one of the color schemes. Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.

COMPLETE INFO & DEMO

responsive-mega-menu-complete-set-

Professional dropdown #2 (Free)

A clean and professional jQuery plugin that displays a multi-layered drop down menu.

COMPLETE INFO & DEMO

professional-dropdown-number-2-

Responsive Multi-Level / Drop-Down Icon Menu

This simple yet attractive multi-levels/drop-down navigation menu is coded in valid XHTML Strict 1.0/HTML5 and CSS3. Well commented to ease the tweaking, you will be able to deploy it on your website within minutes. It also uses a web icons font (Entypo Pictogram Suite) so there is no need for images!

COMPLETE INFO & DEMO

responsive-multi-level-drop-down-menu-

jQuery Navigation Menu Style 10 (Free)

This jQuery drop down plugin features Full cross-browser compatibility, Fully accessible even when javascript is turned off, as a pure css menu, Search engines optimized, Clear unordered list (LI and UL HTML tags) structure and more.

COMPLETE INFO & DEMO

jquery-menu-navigation-style-

Solid Uber Menu

This a complete menu set for your web site. Perfect for any color and any resolution. It is responsive and fits perfect with multi-color scheme. It features Automatic adding arrows to sub-menus, Responsive menu, Mega menu options, Right pane, Expandable top pane, 8 colors, Adaptable mobile version, Integrated bootstrap elements, Customizable rotating ‘home’ element with tooltip, Special ‘roaming background’ effect, Login panel with fading slide effect, Search panel with sliding and Fixed layout.

COMPLETE INFO & DEMO

solid-uber-menu-

Easy to Style jQuery Drop Down Menu Tutorial(Free)

This tutorial will teach you how to make an easy to customize drop down menu with some jQuery effect. To style it into your own design, you just have to modify the a tag CSS style. You can put background images, hover effect and also change the submenu popup animation.

COMPLETE INFO & DEMO

easy-to-style-drop-down-menu-tutorial-

Create The Fanciest Dropdown Menu You Ever Saw (Free)

This tutorial will teach you how to create an awesome drop down menu that you can put anywhere on your site in a matter of seconds. It can handle multiple dropdown levels gracefully and covers variable-width tabs.

COMPLETE INFO & DEMO

create-the-fanciest-drop-down-menu-

Custom Drop-Down List Styling (Free)

A tutorial on how to create some custom drop-down lists. It will show you five examples with different looking drop-down menus and lists for various purposes.

COMPLETE INFO & DEMO

custom-drop-down-list-styling-[3]

Superfish (Free)

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).

COMPLETE INFO & DEMO

superfish-[3]

Simple Effects for Drop-Down Lists (Free)

This tutorial will teach you how to create a jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.

COMPLETE INFO & DEMO

simple-effects-

jQuery Mega Drop Down Menu Plugin (Free)

The jQuery Mega Drop Down Menu plugin tutorial takes any standard HTML nested lists and turns them into horizontal mega menus. With some basic CSS styling the mega menus can be used to create unique & visually appealing navigation for any website.

COMPLETE INFO & DEMO

jquery-mega-drop-down-menu-plugin-[3]

jQuery Dropdown menu with Google style (v2.1) (Free)

This tutorial will show you how to create a jQuery dropdown menu with Google style, it also can be use as a “fixed” menu.

COMPLETE INFO & DEMO

jquery-drop-down-menu-with-google-style-

Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

COMPLETE INFO & DEMO

smooth-navigational-menu-

Leave a Reply

Your email address will not be published. Required fields are marked *