21 jQuery Off-Canvas Menus

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

About the code

Off-Canvas Menu Effects

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

About a code

Off Canvas Mobile Submenu

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

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

About a code

Sidebar Menu Concept

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

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

Responsive: no

Dependencies: jquery.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

About a code

Offcanvas Sidebar Menu with a Twist

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

Responsive: yes

Dependencies: font-awesome.css, jquery.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

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

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

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

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

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

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

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

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

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

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

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

bigSlide.js

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

offCanvasMenu

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.