Sidebar Off-canvas Navigation With jQuery and CSS3

OffCanvas Nav is a modern mobile app-style navigation solution that uses jQuery and CSS3 to create an off-canvas sidebar push menu.

best off canvas menu, react off canvas sidebar, react off canvas menu, arrow navigation, sidebar animation, multi level navigation

Responsive Side Navbar Navigation With Bootstrap 5

How to make use of it:

1. Include Font Awesome in the header section.

<link rel="stylesheet" href="//">

2. Create a play button to toggle the push menu off the canvas.

<div class="button">
  <div class="fa fa-bars"></div>

3. Create a navigation menu with menu links pointing to the content sections of your web page.

<div class="menu">
      <li> <a href="home_is_visible">Home</a> </li>
      <li> <a href="aboutus_is_visible">About</a> </li>
      <li> <a href="clients_is_visible">Clients</a> </li>
      <li> <a href="contactus_is_visible">Contact Us</a> </li>

4. Create content sections as follows.

<div class="content home">

<div class="content aboutus">
  <h1>About Us</h1>

<div class="content clients">

<div class="content contactus">
  <h1>Contact Us</h1>

5. General CSS Styles.

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  color: #fff;
  font-family: 'roboto';
  position: relative;
  background: #E74C3C;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  margin: 0;
  padding: 0;

h1 { font-size: 60px; }

p {
  margin-bottom: 100px;
  line-height: 2.4;

ul {
  margin: 0;
  padding: 20px 0;
  list-style: none;

li {
  margin: 0;
  padding: 0;

a {
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  padding-left: 120px;

a:hover { background: #C0392B; }

6. Basic CSS/CSS3 Styles for Off-Canvas Push List.

.button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10000;
  color: white;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;

.button .fa {
  -webkit-transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay: .75s;
  transition-delay: .75s;

.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  padding-left: 0;
  -webkit-transform: translateX(-150%);
  -ms-transform: translateX(-150%);
  transform: translateX(-150%);
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;

.content {
  position: absolute;
  margin: 0 auto;
  padding: 30px 20%;
  font-size: 18px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: color 1s ease 1s, background 0.5s ease 1s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
  transition: color 1s ease 1s, background 0.5s ease 1s, transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;

.home_is_visible .home,
.aboutus_is_visible .aboutus,
.clients_is_visible .clients,
.contactus_is_visible .contactus {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);

.home_is_visible .home,
.aboutus_is_visible .aboutus,
.clients_is_visible .clients,
.contactus_is_visible .contactus { z-index: 5000; }

.home_is_visible .home {
  color: white;
  background: #2980B9;

.home_is_visible .button .fa { color: white; }

.home_is_visible a { color: white; }

.aboutus_is_visible .aboutus {
  color: black;
  background: salmon;

.aboutus_is_visible .button .fa { color: black; }

.aboutus_is_visible a { color: black; }

.clients_is_visible .clients {
  color: white;
  background: darkgoldenrod;

.clients_is_visible .button .fa { color: white; }

.clients_is_visible a { color: white; }

.contactus_is_visible .contactus {
  color: black;
  background: sandybrown;

.contactus_is_visible .button .fa { color: black; }

.contactus_is_visible a { color: black; }

body.nav_is_visible {
  -webkit-transform: translateX(300px);
  -ms-transform: translateX(300px);
  transform: translateX(300px);

body.nav_is_visible .menu {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);

7. Add the following javascript snippet after the jQuery library to enable the off-panel push menu.

$('.button').on('click', function () {
function removeClasses() {
  $('.menu ul li').each(function () {
    var link = $(this).find('a').attr('href');
$('.menu a').on('click', function (e) {
  var link = $(this).attr('href');

Elastic Off-canvas Navigation with jQuery, Sass Off Canvas Nav Plugin/Github

See Demo And Download

Official Website(tylerfowle): Click Here

This superior jQuery/javascript plugin is developed by tylerfowle. For extra advanced usage, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…


Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…