jQuery off canvas menu examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Full Width Off-Canvas

Author:
Vasileios Mitsaras | October 2, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

Left and right full-width off-canvas menus.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
js-offcanvas.css, jquery.js
Off-Canvas Menu Effects

Off-Canvas Menu Effects

Author:
Mary Lou | August 16, 2014
Made with:
HTMLCSSJavaScript (bounce.js, snap.svg)

About a code

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Off Canvas Mobile Submenu

Author:
Ryan Mulligan | June 21, 2016
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

An experimentation that sets all submenus off screen so that they can be toggled in and out of view when their parent arrow elements are clicked.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Portfolio Page with Animations

Author:
Islam Ibakaev | April 21, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

Super awesome portfolio with off-canvas menu and a lot of animations.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, jquery.js, tweenmax.js

Sidebar Menu Concept

Author:
J Scott Smith | May 2, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Sidebar menu that pushes content aside in 3D space. Still prettifying things.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Medium Like Off-Canvas Menu

Author:
ammit | January 6, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

Minimal Medium styled off-canvas slide in menu.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css, jquery.js

Offcanvas Sidebar Menu with a Twist

Author:
Devilish Alchemist | December 29, 2014
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css, jquery.js

Off Canvas Menu

Author:
Mark Murray | November 28, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

Little off canvas animated menu in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Off Canvas Nav

Author:
Dan Malarkey | October 4, 2014
Made with:
HTML / CSS (Less) / JS

About a code

Nice little off canvas nav prototyping.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css, jquery.js

Off Canvas Nav

Author:
Rémi Lacorne | September 24, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

The toggle is the green bar on the left. It transforms into an overlay - Click on it to close the menu.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Off Canvas Menu

Author:
Nicholas M. Smith | May 15, 2014
Made with:
HTML / CSS (SCSS) / JS

About a code

Another off canvas menu using the checkbox hack to active mobile navigation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Simple Off Canvas Menu

Author:
Nicholas Cerminara | April 17, 2014
Made with:
HTML / CSS / JS

About a code

Simple off canvas menu with CSS3 transitions and translates and little jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, font-awesome.css, jquery.js

Responsive Off-Canvas Navigation

Author:
Chris Coleman | August 2, 2013
Made with:
HTML / CSS (SCSS) / JS

About a code

Just a simple off-canvas navigation with a few options and no annoying styles to override.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

jQuery.SecretNav

Author:
Miguel Jiménez | 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Sliiide

Author:
Ahmed Radwan | 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Author:
scotch | 2014
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Slidebars

Author:
Adam Smith | 2014
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

fly_sidemenu

Author:
Pete R. | 2013
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Multi Level Push Menu

Author:
Momcilo Dzunic | 2013
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js
bigSlide.js

bigSlide.js

Author:
Adam Scott | 2013
Made with:
392 stars19 watchers

About a code

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

offCanvasMenu

offCanvasMenu

Author:
Cloud Four | 2013
Made with:
150 stars13 watchers

About a code

offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨