Best jQuery Side Menu Plugins & Tutorials with Demo

Auto Inherit Bootstrap Theme Vertical Sidebar

Auto Inherit Bootstrap Theme Vertical Sidebar

It is a ready to use component in any bootstrap website. It consists of a vertical navigation menu based on css3 and jQuery.

Features:

  • Fully Resposive on all screens; Desktop, Tablet, Mobile
  • Same Code for all devices and platforms
  • Multiple Level Dropdown Menu (Unlimited)
  • Glyphicons – Bootstrap version 3.3.5
  • Inherit any theme look
  • Collapsible Mobile Menu

cbFlyout : jQuery Responsive Navigation Plugin

cbFlyout : jQuery Responsive Navigation Plugin

cbFlyout is a responsive navigation jQuery plugin for developers to help them in their projects handling.

Mobility : Framework for developing Mobile Applications

Mobility : Framework for developing Mobile Applications

Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.

Features:

  • CSS Powered Transitions
  • Fixed Header and footer
  • Form Fields optimized for mobile
  • Tabs
  • Lists (with inifinite scrolling pagination both on top and on the bottom)
  • Modals
  • Popover Menus
  • Aside Menus
  • Notifications
  • Hero Image

headerMessage : Pure CSS3 Slide Down Toggle Header

headerMessage : Pure CSS3 Slide Down Toggle Header

Pure CSS3, without javascript. Nice slide down toggle header message.

Section Scroll : jQuery Scrollable Section Navigation

Section Scroll : jQuery Scrollable Section Navigation

Section Scroll is a lightweight jQuery plugin for automatically generating a side bullet navigation on your one page scrolling website. Click on the navigation to scroll smoothly through different sections, automatically selects the correct navigation items.

Vertical Fixed Navigation with CSS & jQuery

Vertical Fixed Navigation with CSS & jQuery

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

Material Design Slider Animation with CSS3

Material Design Slider Animation with CSS3

A Material Design inspired slider with effective communicating animations.Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

Vertical Layout with Navigation

Vertical Layout with Navigation

Vertically scrolling sections of content with a slick mobile hamburger navigation.

Multi-Level Menu with CSS3 & JavaScript

Multi-Level Menu with CSS3 & JavaScript

A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.

The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a back button (not shown in our demo). Deeper levels are referenced with a data attribute

Animating an SVG Menu Icon with Segment

Animating an SVG Menu Icon with Segment

A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.