Side Overlay Navigation With jQuery And CSS3

File Size: 2.11 KB
Views Total: 4054
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  <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>

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 {
  display: inline-block;
  float: none;
  height: 25px;
  padding: 10px;
  opacity: .5;
  width: 25px;
  z-index: 100;

.burger_box,  .burger_box { opacity: 1; }

.burger_box { 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="" 
  e.preventDefault(); $('.list_load, .list_item').stop();

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

  var count = $('.list_item').length;
  $('.list_load').slideDown( (count*.6)*100 );
    var thisLI = $(this);
    timeOut = 100*i;

  e.preventDefault(); $('.list_load, .list_item').stop();

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

  var count = $('.list_item').length;

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