
Collection of free jQuery off-canvas menu examples and plugins.
- jQuery Menus
- jQuery Context Menus
- jQuery Fullscreen Menus
- jQuery Mega Menus
- jQuery Scrolling Menus
- React Menus
- CSS Menus
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
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
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
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
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
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