Interactive Off-canvas Overlay Menu With jQuery And CSS3

An interactive, mobile-friendly site navigation that allows to show/hide an off-canvas sidebar overlay menu / panel based on user actions.

How to use it:

1. Create the mobile navigation together with the menu toggle links as follow:

<nav class="nav-container">
  <ul class="nav-menu">
    <li class='nav-close-menu-li'><a href='#'>X</a>&nbsp;&nbsp;&nbsp;<a href='#'>Close Menu</a></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
  <div class='nav-link-container'>
    <a href='#' class="nav-menu-link"></a>
  </div>
</nav>

2. Style the mobile navigation in the CSS.

.nav-link-container {
  -moz-border-radius: 30px/30px;
  -webkit-border-radius: 30px 30px;
  border-radius: 30px/30px;
  width: 30px;
  height: 30px;
  background: white;
  float: right;
  margin-right: 3%;
  margin-top: 20px;
  position: absolute;
  margin-left: 27%;
}

.nav-menu-link {
  border-bottom: 5px double #4682B4;
  border-top: 2px solid #4682B4;
  height: 2px;
  width: 10px;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}

.nav-menu {
  float: right;
  background: white;
  list-style: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-left: 0;
  font-family: Verdana, Helvetica, Arial;
  font-size: 11px;
  -ms-transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);
}

.nav-inactive-menu-link-container { display: none; }

.nav-active-menu-container {
  -ms-transform: translate(0);
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  transform: translate(0);
}

.nav-menu li {
  padding-left: 20px;
  height: 40px;
  border-bottom: 2px solid #f2f2f2;
}

.nav-menu li a {
  text-decoration: none;
  line-height: 40px;
  color: #b3b3b3;
  font-weight: bold;
}

.nav-menu li a:hover { color: #4682B4; }

.nav-close-menu-li {
  background: #4682B4;
  display: block;
}

.nav-close-menu-li a { color: white !important; }

3. Position the mobile navigation.

.nav-container {
  float: right;
  margin-top: 0;
  width: 30%;
}

4. Set the background color of the fullscreen overlay when the navigation is opened.

.inactive-body { background: rgba(0, 0, 0, 0.7); }

5. The mobile navigation requires jQuery library loaded properly in the document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

6. The main JavaScript (jQuery script) to active the mobile navigation by toggling the CSS classes as shown below.

$( "body" ).click(function(event){
  if( $(".nav-menu").hasClass("nav-active-menu-container") && $(".nav-link-container").hasClass("nav-inactive-menu-link-container") )
  {
    $(".nav-menu").toggleClass("nav-active-menu-container");
    $(".content").toggleClass("inactive-body");
  }
});

$(".nav-close-menu-li > a").click(function(event){
  $(".nav-menu").toggleClass("nav-active-menu-container");
  $(".content").toggleClass("inactive-body");
});

$(".nav-menu").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e) {
    if(! $(".nav-menu").hasClass("nav-active-menu-container") )
      $(".nav-link-container").toggleClass("nav-inactive-menu-link-container");
    else
      $(".content").toggleClass("inactive-body");
});

$( ".nav-link-container > a" ).click(function(event){
  $(".nav-link-container").toggleClass("nav-inactive-menu-link-container");
  $(".nav-menu").toggleClass("nav-active-menu-container");
});

---

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