Best jQuery Side Menu Plugins & Tutorials with Demo

Dynamic Shape Overlays with SVG

Dynamic Shape Overlays with SVG

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some nice easing functions from glsl-easings and by tuning the curve, speed and the delay value, we can generate many interesting effects.

jQuery Multi level Push Menu Plugin

jQuery Multi level Push Menu Plugin

Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).

Features:

  • Multi-level menu support
  • Endless nesting of navigation elements
  • Expand/Collapse navigation with a left/right swipe gesture
  • Push/Slide DOM elements of choice
  • Left-to-right and Right-to-left sliding directions
  • Flexible, simple markup
  • JS Array input, if markup is not present
  • A number of exposed Options, Methods and Events
  • Cross-browser compatibility (IE8+, Chrome, Midori, Firefox, Safari, Opera, Android Browser, iOS Safari)

menuUI : jQuery Bootstrap Menu with JSON

menuUI : jQuery Bootstrap Menu with JSON

menuUI is a simple plugin to generate bootstrap nav bar from a json object.

sideToggle : jQuery plugin for Toggling Elements Sideways

sideToggle : jQuery plugin for Toggling Elements Sideways

This is a small jQuery plugin that toggles elements sideways, rather than the up-and-down default of jQuery’s toggle. There are three versions available for use; one of them uses an extra Javascript library called Velocity.js that offers a performance gain over jQuery’s .animate(), but it likely won’t be necessary for small use.

Hiraku.js : jQuery Offcanvas Menu Plugin

Hiraku.js : jQuery Offcanvas Menu Plugin

We made jQuery plugin called hiraku.js so that more people can use Offcanvas-menu functionality which is used in a CMS we make.

Features:

  • Not affected by the DOM structure.
  • Enable to open both right and left side menu.
  • Main canvas is not scrolled, while scrolling Offcanvas-menu.
  • Easy to control the movement
  • Accessible for keyboard navigation and screen readers.

Ember Burger Menu

Ember Burger Menu

An off-canvas sidebar component with a collection of animations and styles using CSS transitions.

Features:

  • Easy to use & setup off-canvas menu
  • Mix and match from many menu & menu item animations
  • Swipe gesture support with changeable thresholds
  • Easily create your own animations

Ember Burger Menu : Off-canvas Sidebar

Ember Burger Menu : Off-canvas Sidebar

An off-canvas sidebar component with a collection of animations and styles using CSS transitions.

Features:

  • Easy to use & setup off-canvas menu
  • Mix and match from many menu & menu item animations
  • Control your menu from anywhere in your app
  • Swipe gesture support with changeable thresholds
  • Easily create your own animations

Dropdown Sidebar Menu Responsive Bootstrap Navigation

Dropdown Sidebar Menu Responsive Bootstrap Navigation

Scoop Navigation Menu Consist of both Horizontal and Vertical navigation with customize options and themes. Its lightweight and compatible with almost all major browsers and devices. this plugin make more then 50 plus navigation view. It supports four levels sub menu with shrink, Overlay and push effect.

Multi purpose Responsive Scoop Navigation supports multi navigation style like: Expanded, Compact, Collapsed, offcanvas, fullPage Menu , Full MegaMenu, Half MegaMenu and Search bar on navigation. Three new navigation style introduce in this plugin like ex-popover, Sub-Expanded and fulldrop Menu

DROP : jQuery Responsive Dropdown Navigation

DROP : jQuery Responsive Dropdown Navigation

DROP is an awesome navigation jQuery plugin ready to use in any HTML page displayed on mobile phones, tablets and desktop devices.

Mdstrap : jQuery Side Menu Plugin

Mdstrap : jQuery Side Menu Plugin

jQuery mdStrap plugin creates a side menu for smartphones or other handheld devices. It’s built based on Twitter Bootstrap’s framework version 4 (currently alpha 2).