Best jQuery Side Menu Plugins & Tutorials with Demo

    Ideabox : Material Navigation Menu with jQuery

    Ideabox : Material Navigation Menu with jQuery

    Quick web site menus or admin dashboard navigation do the same google like. with material design.

    Features:

    • Fully customizable via CSS
    • Full Responsive
    • Unlimited colors
    • Lightweight and Simple
    • Bootstrap Compatible
    • Clean Code
    • Clean and Material design
    • Multipurpose
    • Material font icons
    • Easy to Customize
    • Easy understanding commented code
    • CSS3 animations

    jQuery accessible Offcanvas plugin : js-offcanvas

    jQuery accessible Offcanvas plugin : js-offcanvas

    A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.

    Features:

    • Uses CSS transforms & transitions.
    • BEM c-offcanvas c-offcanvas--left is-open
    • From Any Direction: left, right, top and bottom.
    • Overlay, Reveal and Push.
    • API & Events

    mlStackNav : jQuery Multi-level Stack Navigation

    mlStackNav : jQuery Multi-level Stack Navigation

    jQuery mlStackNav is a customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.

    BigSlide.js : jQuery Slide Panel Navigation Plugin

    BigSlide.js : jQuery Slide Panel Navigation Plugin

    BigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

    It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

    jQuery Sidebars Ultimate Plugin

    jQuery Sidebars Ultimate Plugin

    This plugin is probably the most extensive tool for quickly creating and configuring any number of sidebars for any direction. Sidebars Ultimate is a lightweight Jquery plugin, it supports a huge number of browsers and mobile devices, is very simple to use and allows to use on any type of website.A lot of options, methods and events create many oportunities, so that your website will gain a unique functionality and look. If you plan to use sidebars on your website, trust me, you want to have this plugin : )

    menuBreaker : jQuery Responsive Dropdown Menu Plugin

    menuBreaker : jQuery Responsive Dropdown Menu Plugin

    JavaScript & jQuery plugin to switch between mobile and desktop menu and change submenus side on browser window resize.

    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.