Best jQuery Side Menu Plugins & Tutorials with Demo

Trunk.js : A responsive Navigation Web solution

Trunk.js : A responsive Navigation Web solution

Trunk.js is a responsive web solution for creating better navigation and layouts. It tucks your navigation into the “drawer” on many devices, and while it triggers with jQuery, it moves with CSS for a much smoother effect.

jQuery Instant Responsive Menus with CSS3

jQuery Instant Responsive Menus with CSS3

Create different type of menus on the fly without changing the HTML Structure. Just replace CSS class names in the HTML markup to make a horizontal menu or any menu to function like a one page scroll menu, vertical menu, toggle menu, slide out menu, full screen navigation, tabbed menu, dots navigation and much more.

Features:

  • One Page Smooth Scroll support
  • Customizable CSS3 animation effects (Faster than jQuery Animations)
  • Fully Responsive
  • Unlimited Color Themes
  • Light weight
  • Built with CSS3 and improved with some jQuery
  • Compatible with bootstrap

SecretNav : jQuery Push Menu Plugin

SecretNav : jQuery Push Menu Plugin

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

Demo 1 Demo 2

Responsive Sidebar Navigation with CSS & jQuery

Responsive Sidebar Navigation with CSS & jQuery

If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project.

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

3D Bold Navigation in CSS & jQuery

3D Bold Navigation in CSS & jQuery

A bold navigation that slides in when active, replacing the current content in a 3D space.To increase the focus on the menu, we pushed the main content along the z-axis (by using CSS transformations we actually scale down the content size, we don’t use 3D translations, but the result is the same).

Motion Blur Effect with SVG & jQuery

Motion Blur Effect with SVG & jQuery

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.

Cta.js : Animate your Action-to-effect path

Cta.js : Animate your Action-to-effect path

cta.js or “Call to Animation” is a light-weight performant library to animate any element (“action”) onto any other element (“effect”) on the page.

Ultra Navigation – Responsive Bootstrap Sidebar

Ultra Navigation - Responsive Bootstrap Sidebar
  • Fully Responsive and Bootstrap compatible.
  • Collapsible sidebar on toggle click. You can also set your custom breakpoints.
  • Awesome looks (Available in 5 skins and colors).
  • Wide View support. (Full Screen sidebar)
  • Vector Icons (font Awesome 4.3.0 included)
  • Show on Hover Mode implemented with a single option.
  • Fixed Menu variation (Slimscroll Integrated).
  • Content Styles. (Shrink, Push and Overlay mode)
  • JQUERY UI Animations (Drop, Pulsate, Clip, Explode etc..)
  • OFF-CANVAS Ready (Using options)

Sliiide : jQuery Sliding Menu

Sliiide : jQuery Sliding Menu

The easiest way to create a sliding menu with jQuery.You have a div (probably a nav menu or a side bar) that you want to animate with a sliding effect from outside the viewport to inside the viewport.

Mobile Menu Hamburger with jQuery & CSS

Mobile Menu Hamburger with jQuery & CSS

A hamburger menu for mobile websites. A demo how to create an up-to-date menu for a mobile website in a typical hamburger style.This Template is using only CSS and javascript (jQuery)