Collection
Post cover
Created 4 month back

Best 20 jQuery Off-Canvas Menus

Collection of free jQuery off-canvas menu examples and plugins from codepen and other resources.

Off Canvas Nav

Author: Rémi Lacorne

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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 Mobile Submenu

Author: Ryan Mulligan

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Dependencies: jquery.js

Simple Off Canvas Menu

Author: Nicholas Cerminara

Links: demo and code

Made with: HTML / CSS / JS

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

Sliiide

Author: Ahmed Radwan

Links: github page

Made with: HTML / CSS / JS

The easiest way to create a sliding menu with jQuery.

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

Responsive: yes

Dependencies: jquery.js

Full Width Off-Canvas

Author: Vasileios Mitsaras

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Left and right full-width off-canvas menus.

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

Responsive: yes

Dependencies: js-offcanvas.css, jquery.js

fly_sidemenu

Author: Pete R.

Links: github page

Made with: HTML / CSS / JS

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Off Canvas Menu

Author: Nicholas M. Smith

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Responsive: yes

Dependencies: jquery.js

Medium Like Off-Canvas Menu

Author: ammit

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Minimal Medium styled off-canvas slide in menu.

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Off Canvas Nav

Author: Dan Malarkey

Links: demo and code

Made with: HTML / CSS (Less) / JS

Nice little off canvas nav prototyping.

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Multi Level Push Menu

Author: Momcilo Dzunic

Links: github page

Made with: HTML / CSS / JS

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

Full Page Off-Canvas Navigation

Author: Caleb Varoga

Links: demo and code

Made with: HTML / CSS / JS

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

Portfolio Page with Animations

Author: Islam Ibakaev

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive Off-Canvas Navigation

Author: Chris Coleman

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Author: scotch

Links: github page

Made with: HTML / CSS / JS

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

Offcanvas Sidebar Menu with a Twist

Author: Devilish Alchemist

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js

jQuery.SecretNav

Author: Miguel Jiménez

Links: github page

Made with: HTML / CSS / JS

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

Slidebars

Author: Adam Smith

Links: github page

Made with: HTML / CSS / JS

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

Off Canvas Menu

Author: Mark Murray

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Little off canvas animated menu in jQuery.

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

Dependencies: jquery.js

Sidebar Menu Concept

Author: J Scott Smith

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Dependencies: jquery.js

Post cover

Off-Canvas Menu Effects

Author: Mary Lou

Links: demo and code

Made with: HTML; CSS; JavaScript (bounce.js,
snap.svg)

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback