Best jQuery Menus Plugins & Tutorials with Demo

Tendina : jQuery Dropdown Side Menus Plugin

Tendina : jQuery Dropdown Side Menus Plugin

Tendina is a simple jQuery plugin that helps you build dynamic, interactive side-menus in seconds.

Features:

  • Provides a super easy way to setup sidemenus in a matter of minutes
  • Supports infinite levels of nesting
  • Hides your nested submenus and manages all interactions
  • Handles dinamically added elements (nice to have when building a menu from a JSON)
  • Supports multiple menu initializations on the same page
  • It’s lightweight – 3kb minified!

scotchPanels.js : jQuery Off Canvas Menus and Panels Plugin

scotchPanels.js : jQuery Off Canvas Menus and Panels Plugin

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.

Features:

  • Uses CSS3 with JavaScript Fallback
  • Fully Responsive
  • Custom transition styles
  • Completely Customizable with tons of optional settings
  • Lightweight, easy to use, and only one file
  • Cross Browser Support
  • Choose either custom HTML, images, iframes, or video panels
  • Optionally use HTM5 Data Attributes
  • Off Canvas directions from top, Bottom, left, and right
  • Works from any container or div
  • Extensive Callbacks API
  • Click, touch, hover, and keyboard helpers
  • CSS Class Helpers

Pure Drawer : Pure CSS Off-Canvas drawers Menu

Pure Drawer : Pure CSS Off-Canvas drawers Menu

You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required.

  • 9 Cool Effects
  • Different Drawer Position
  • Responsive Design
  • Cross browser support
  • Multiple Drawers on single page
  • No javascript

metisMenu : Easy menu jQuery plugin for Bootstrap

metisMenu : Easy menu jQuery plugin for Bootstrap

metisMenu  is a easy menu jQuery plugin for Twitter Bootstrap 3.

Slide in panel with jQuery & CSS3

Slide in panel with jQuery & CSS3

A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.

Off-Canvas Menu Effects with CSS3 & SVG

Off-Canvas Menu Effects with CSS3 & SVG

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.Today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

Off Canvas infinity push jQuery Mobile Navigation

Off Canvas infinity push jQuery Mobile Navigation

Off Canvas Infinity Push is a jQuery plugin that gives you the ability to make any desktop navigation into a mobile navigation. This plugin offers unlimited sub navigations.

Responsive Off Canvas Menu with CSS3 & jQuery

Responsive Off Canvas Menu with CSS3 & jQuery

In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.

Side Shopping Cart with CSS3 & jQuery

Side Shopping Cart with CSS3 & jQuery

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.

Secondary Fixed Navigation with CSS3 & jQuery

Secondary Fixed Navigation with CSS3 & jQuery

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. We see this effect a lot these days, a good example I can think of is Disqus For Websites. A nice touch is to animate the logo and the main call-to-action button to slide in once the navigation becomes fixed.