Side Overlay Navigation With jQuery And CSS3

A mobile-friendly off-canvas hamburger navigation that slides from the left of the webpage and covers a specific part of the main content. Build with HTML, CSS3 and a little bit of JavaScript (jQuery).

How to use it:

1. The primary HTML for the side overlay menu.

<div class="side_menu">
  <div class="burger_box">
    <div class="menu-icon-container">
      <a href="#" class="menu-icon js-menu_toggle closed">
        <span class="menu-icon_box">
          <span class="menu-icon_line menu-icon_line--1"></span>
          <span class="menu-icon_line menu-icon_line--2"></span>
          <span class="menu-icon_line menu-icon_line--3"></span>
        </span>
      </a>
    </div>
  </div>
  <div class="container">
    <h2 class="menu_title">Menu Title</h2>
    <ul class="list_load">
      <li class="list_item"><a href="#">Menu Item 1</a></li>
      <li class="list_item"><a href="#">Menu Item 2</a></li>
      <li class="list_item"><a href="#">Menu Item 3</a></li>
      <li class="list_item"><a href="#">Menu Item 4</a></li>
      <li class="list_item"><a href="#">Menu Item 5</a></li>
      ...
    </ul>
  </div>
</div>

2. The CSS styles for the menu container.

.side_menu {
  background: rgba(0,20,60,.9);
  height: 100vh;
  left: -250px;
  position: fixed;
  top: 0;
  width: 250px;
}

.side_menu .container { padding: 0 1em; }

3. The required styles for the hamburger toggle button.

.burger_box {
  display: block;
  float: right;
  margin-right: -45px;
}

.burger_box a.menu-icon {
  display: inline-block;
  float: none;
  height: 25px;
  padding: 10px;
  opacity: .5;
  width: 25px;
  z-index: 100;
}

.burger_box a.menu-icon:hover,  .burger_box a.menu-icon.opened { opacity: 1; }

.burger_box a.menu-icon.opened { background: rgba(0,20,60,.9); }

.burger_box .menu-icon_box {
  display: inline-block;
  height: 25px;
  position: relative;
  text-align: left;
  width: 25px;
}

.burger_box .menu-icon_line {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 3px;
  position: absolute;
  width: 100%;
}

.burger_box .menu-icon_line--1 { top: 2px; }

.burger_box .menu-icon_line--2 { top: 10px; }

.burger_box .menu-icon_line--3 { top: 18px; }

.burger_box .menu-icon_line--1 {
  transition: top 200ms 250ms, transform 200ms;
  -webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
}

.burger_box .menu-icon_line--2 {
  transition: opacity 0ms 300ms;
  -webkit-transition: opacity 0ms 300ms;
}

.burger_box .menu-icon_line--3 {
  transition: top 100ms 300ms, transform 200ms;
  -webkit-transition: top 100ms 300ms, -webkit-transform 200ms;
}

.burger_box .menu-icon.opened .menu-icon_box {
  transform: scale3d(0.9, 0.9, 0.9);
  -webkit-transform: scale3d(0.9, 0.9, 0.9);
}

.burger_box .menu-icon.opened .menu-icon_line { top: 10px; }

.burger_box .menu-icon.opened .menu-icon_line--1 {
  transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transition: top 100ms, transform 200ms 250ms;
  -webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
}

.burger_box .menu-icon.opened .menu-icon_line--2 {
  opacity: 0;
  transition: opacity 200ms;
  -webkit-transition: opacity 200ms;
}

.burger_box .menu-icon.opened .menu-icon_line--3 {
  transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transition: top 200ms, transform 200ms 250ms;
  -webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
}

4. Style & animate the menu items.

.list_load {
  display: none;
  list-style: none;
  padding: 0;
}

.list_item {
  margin-left: -20px;
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.list_item a {
  color: #fff;
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}

.list_item a:hover { background: rgba(255,255,255,.2); }

5. The core JavaScript to activate the side overlay menu. Copy the following JavaScript snippets and put them after the latest version of jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

$(document).on('click','.js-menu_toggle.closed',function(e){
  e.preventDefault(); $('.list_load, .list_item').stop();
  $(this).removeClass('closed').addClass('opened');

  $('.side_menu').css({ 'left':'0px' });

  var count = $('.list_item').length;
  $('.list_load').slideDown( (count*.6)*100 );
  $('.list_item').each(function(i){
    var thisLI = $(this);
    timeOut = 100*i;
    setTimeout(function(){
      thisLI.css({
        'opacity':'1',
        'margin-left':'0'
      });
    },100*i);
  });
});

$(document).on('click','.js-menu_toggle.opened',function(e){
  e.preventDefault(); $('.list_load, .list_item').stop();
  $(this).removeClass('opened').addClass('closed');

  $('.side_menu').css({ 'left':'-250px' });

  var count = $('.list_item').length;
  $('.list_item').css({
    'opacity':'0',
    'margin-left':'-20px'
  });
  $('.list_load').slideUp(300);
});

---

This awesome jQuery plugin is developed by Jordan. For more Advanced Usages, please check the demo page or visit the official website.