Best jQuery Menus Plugins & Tutorials with Demo

SecretNav : jQuery Push Menu Plugin

SecretNav : jQuery Push Menu Plugin

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

Demo 1 Demo 2

Tocify.js : jQuery Table of Contents

Tocify.js : jQuery Table of Contents

A jQuery plugin that dynamically generates a table of contents. Tocify can be optionally styled with Twitter Bootstrap or jQueryUI Themeroller, and optionally animated with jQuery show/hide effects. Tocify also optionally provides support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

Responsive Multi Menu with jQuery & CSS3

Responsive Multi Menu with jQuery & CSS3

The easiest way to develop site with multi level navigation and user-friendly experience it has been optimized for mobile devices using HTML5, CSS3 and jQuery.

Features:

  • Easy installation
  • Multi level on CSS
  • Light-weight
  • Multiple menus
  • Works in mobiles
  • Free licensed under MIT

ScrollMenu : New Interface to Replace Your Old Scrollbar

ScrollMenu : New Interface to Replace Your Old Scrollbar

ScrollMenu is a new interface to replace your old boring scrollbar. It gives a user sense of where they are in a page and how long is that section. With a high customizibility of this jQuery plugin you can have a unique user experience.

GreedyNav : jQuery Responsive Navigation Menu

GreedyNav : jQuery Responsive Navigation Menu

A responsive navigation menu that stacks items into a dropdown menu when they overflow.

When the user resizes the window the nav will shrink, any overflowing items will be removed from the visible list and get prepended to a list of vertically stacked items that are hidden. The user is notified of this action by a count badge next to a hamburger icon at the end of the menu, which acts as a dropdown trigger button for the hidden list.

ContextMenu.js : JavaScript & CSS3 Drop Down Menus

ContextMenu.js : JavaScript & CSS3 Drop Down Menus

ContextMenu.js is a jQuery plugin for creating highly customizable drop down menus triggerable by various mouse events. Use it to create context menus, drop down lists, navigations, and more.

  • 9 customizable options
  • 7 transition effects
  • 3 action hooks
  • 4 menu item types
  • Various trigger events
  • Dynamic event binding
  • Custom positioning
  • HIDPI ready

Responsive Sidebar Navigation with CSS & jQuery

Responsive Sidebar Navigation with CSS & jQuery

If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project.

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Web Slide : Responsive Mega Menu for Bootstrap 3+

Web Slide : Responsive Mega Menu for Bootstrap 3+

Create Beautiful MegaMenu navbar for your site. Using CSS3 Animation & Small Java Script It provides a modern app style navigation look in your website.

  • Powerfull Feature: One Code for all devices
  • Mobile friendly website menu
  • Modern app style navigation
  • Bootstrap Navbar
  • Bootstrap 3 Slide in menu navbar on mobile

Yamm : jQuery MegaMenu for Bootstrap 3

Yamm : jQuery MegaMenu for Bootstrap 3

This isYet another megamenu for Bootstrap 3 from Twitter. Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.

3D Bold Navigation in CSS & jQuery

3D Bold Navigation in CSS & jQuery

A bold navigation that slides in when active, replacing the current content in a 3D space.To increase the focus on the menu, we pushed the main content along the z-axis (by using CSS transformations we actually scale down the content size, we don’t use 3D translations, but the result is the same).