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="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

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

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

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

<div class="menu">
  <nav>
    <ul>
      <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>
    </ul>
  </nav>
</div>

4. Create content sections as follows.

<div class="content home">
  <h1>Home</h1>
  <p>...</p>
</div>

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

<div class="content clients">
  <h1>Clients</h1>
  <p>...</p>
</div>

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

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.

$('body').addClass('home_is_visible');
$('.button').on('click', function () {
  $('body').toggleClass('nav_is_visible');
});
function removeClasses() {
  $('.menu ul li').each(function () {
    var link = $(this).find('a').attr('href');
    $('body').removeClass(link);
  });
}
$('.menu a').on('click', function (e) {
  e.preventDefault();
  removeClasses();
  var link = $(this).attr('href');
  $('body').addClass(link);
  $('body').removeClass('nav_is_visible');
});

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.