Collection of free jQuery off-canvas menu examples and plugins.

17 jQuery Off-Canvas Menus

Collection of free jQuery off-canvas menu examples and plugins.

Related Articles

  1. jQuery Menus
  2. jQuery Context Menus
  3. jQuery Fullscreen Menus
  4. jQuery Mega Menus
  5. jQuery Scrolling Menus
  6. React Menus
  7. CSS Menus

Table of Contents:

  1. jQuery Off-Canvas Menu Examples
  2. jQuery Off-Canvas Menu Plugins

jQuery Off-Canvas Menu Examples

Author

  • Vasileios Mitsaras

Made with

  • HTML / CSS (SCSS) / JS

About a code

Full Width Off-Canvas

Left and right full-width off-canvas menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: js-offcanvas.css, jquery.js

Author

  • Islam Ibakaev

Made with

  • HTML / CSS (SCSS) / JS

About a code

Portfolio Page with Animations

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

Author

  • Caleb Varoga

Made with

  • HTML / CSS / JS

About a code

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • ammit

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Medium Like Off-Canvas Menu

Minimal Medium styled off-canvas slide in menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Devilish Alchemist

Made with

  • HTML / CSS (SCSS) / JS

About a code

Offcanvas Sidebar Menu with a Twist

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Mark Murray

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Menu

Little off canvas animated menu in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Dan Malarkey

Made with

  • HTML / CSS (Less) / JS

About a code

Off Canvas Nav

Nice little off canvas nav prototyping.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Rémi Lacorne

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Nav

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

Author

  • Nicholas M. Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Off Canvas Menu

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nicholas Cerminara

Made with

  • HTML / CSS / JS

About a code

Simple Off Canvas Menu

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

Author

  • Chris Coleman

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Off-Canvas Navigation

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 Off-Canvas Menu Plugins

Author

  • Miguel Jiménez

Made with

  • HTML / CSS / JS

About a code

jQuery.SecretNav

Push menu plugin that slides out an off-canvas navigation from the edge of the screen.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Ahmed Radwan

Made with

  • HTML / CSS / JS

About a code

Sliiide

The easiest way to create a sliding menu with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • scotch

Made with

  • HTML / CSS / JS

About a code

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Adam Smith

Made with

  • HTML / CSS / JS

About a code

Slidebars

Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. Version 2.0 is a complete rewrite which features clean and discreet markup, permits an unlimited number of off-canvas instances on any side and is equipped with a full API, callbacks and events for ultimate control.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Pete R.

Made with

  • HTML / CSS / JS

About a code

fly_sidemenu

Recreate an Airbnb iOS7 App Menu Animation using CSS3 and jQuery.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Momcilo Dzunic

Made with

  • HTML / CSS / JS

About a code

Multi Level Push Menu

Multi-level push menu is cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

back to top