Best jQuery Menus Plugins & Tutorials with Demo

jQuery Multilevel Menu Editor with Bootstrap

jQuery Multilevel Menu Editor with Bootstrap

jQuery Menu Editor , is an HTML / Javascript tool for editing multilevel menus by means of a user-friendly interface.

Features:

  • Add, Update & Remove items from Menu
  • Multilevel Drag & Drop
  • Form Item Editor
  • Include IconPicker Plugin
  • Load data from JSON string
  • The output is a Json string

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).

Web Slide – Bootstrap 4 Mega Menu Responsive

Web Slide - Bootstrap 4 Mega Menu Responsive

Build your mobile-first web projects with web slide navigation system that’s give you all type of ready made responsive menu items for your any type of websites. Made with pure css, html, jquery, so you can customize it as you want that suits your website layout.

Features:

  • Ecommerce vertical tabbing mega menu
  • Full & Fixed website menu
  • Bootstrap 4 compatible
  • Horizontal multi level dropdown menu
  • Top fixed functionality
  • Animation effects menus
  • Off Canvas Menu
  • RTL menu

Gradient Topography Animation with Anime.js

Gradient Topography Animation with Anime.js

An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

Tacky : A simple jQuery Sticky Menu

Tacky : A simple jQuery Sticky Menu

A simple jQuery sticky menu.Take your nav and stick it up your page.

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)