Best jQuery Menus Plugins & Tutorials with Demo

Page Stack Navigation with CSS3 & JavaScript

Page Stack Navigation with CSS3 & JavaScript

A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack. When clicking on a menu item, the respective page comes up.

AnchorSpy.js : jQuery plugin to Active Menu item on Scroll

AnchorSpy.js : jQuery plugin to Active Menu item on Scroll

AnchorSpy.js is a jQuery plugin to active menu item on scroll.

Project Cards Template in CSS & jQuery

Project Cards Template in CSS & jQuery

A portfolio template with expandable projects and a full-page navigation inspired by Primer app.

Mega Nav : CSS Mega Navigation Menu

Mega Nav : CSS Mega Navigation Menu

A simple mega nav menu in pure CSS. This mega nav uses top-rated CSS classes for modern features, like colors for background and to change text on hover and stuff.

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