Best jQuery Menus Plugins & Tutorials with Demo

jQuery Bootstrap-style Dropdowns

jQuery Bootstrap-style Dropdowns

One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap’s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn’t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

While the appearance of these dropdowns is almost identical to those of Bootstrap’s, it’s important to note that JavaScript for this plugin was developed entirely from scratch. Some CSS was borrowed, however, especially for generating those gorgeous tips.

MetNav 2 : Another jQuery Metro UI navigation menu

MetNav 2 : Another jQuery Metro UI navigation menu

MetNav 2 is jEffectBox’s 2nd jQuery navigation menu plugin based on Window 8 Metro theme. It’s very lightweight and looks good on almost all major browsers and devices. It’s a Windows 8 Tile base navigation menu which supports unlimited sub menus. It supports responsive design and works well on touch devices.This plugin is dedicated to all Metro lover in the world.

Features:

  • Supports unlimited number of sub-menus.
  • Supports responsive design.
  • Looks good in almost all major browsers and devices.
  • Very easy to integrate to any website.
  • Full documentation included.
  • Very lightweight, only 3kb of JavaScript (minified version is 2kb).
  • Control appearance through CSS, so it can be restyled.
  • Supports touch devices.

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

A jQuery plugin that let you create a smooth jump to sub navigational menu in one JS call.The menu can be used to assist your navigation for pages with a lot of content.

Naver : jQuery plugin for responsive navigation

Naver : jQuery plugin for responsive navigation

Naver is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle.

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

I’ve tested this on most major platforms and browsers and it seems to work fine on all of them. The idea is simple, it lets you make a quick single page layout and gives you the option of some UI effects, such as disappearing pieces of image to reveal menus. I’ve also added some options to disable all that if it’s not for you. How does it work? Well let’s have a look.

Dropmenu : jQuery Multi-level dropdown menu for Buttons

Dropmenu : jQuery Multi-level dropdown menu for Buttons

Multi-level dropdown menu for buttons. Supports any HTML for items, multiple combined sync/async datasources.

Jet : jQuery CSS3 Responsive Megamenu

Jet : jQuery CSS3 Responsive Megamenu

Jet Responsive Megamenu is a menu component based in CSS and Javascript code. It can be used like a dropdown navigation, megamenu navigation or both. It’s has a responsive and fluid layout.

Features:

  • 14 Styles
  • Responsive
  • Collapsible
  • Javascript/CSS effects
  • Grid system
  • Cross browser
  • Easy to use

Animated Border Menus with CSS3 & JavaScript

Animated Border Menus with CSS3 & JavaScript

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

SlickNav : jQuery Responsive Mobile Menu Plugin

SlickNav : jQuery Responsive Mobile Menu Plugin

Responsive Mobile Menu jQuery Plugin.

Features:

  • Supports with multi-level menus
  • Flexible, simple markup
  • Cross-browser compatibility
  • Keyboard Accessible
  • Degrades gracefully if javascript disabled
  • Creates ARIA compliant menu

jQuery CSS3 Modern Menu 3

jQuery CSS3 Modern Menu 3

Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:

  • It has a clean and attractive design.
  • It offers both a horizontal and a vertical layout.
  • It comes with 8 different themes to choose from.
  • The look is completely customizable.
  • It supports multilevel dropdowns.
  • It has smooth and attractive animations for the buttons as well as the dropdowns.
  • It uses CSS animations for better performance.
  • It has a jQuery animation fallback for browsers that do not support CSS animations.