Responsive Multi-Level Off-canvas Navigation Plugin - Navpad Menu

A stylish responsive jQuery navigation script that converts a horizontal navigation bar into a toggleable off-canvas menu on small screen devices, based on CSS3 media queries. 

Basic Usage:

1. Create a multi-level navigation system using nested html unordered lists. The whole markup should be like this:

<div id="menu">
  <div class="menu-toggler"><span>I'm a toggle button</span></div>
  <div class="responsive-menu">
    <div id="navigator">
      <ul class="nav">
        <li class="title">I'm a menu title</li>
        <li><a href="#" style="border:none;">Home</a></li>
        <li><a href="#">About</a></li>
        <li> <a href="#container">Categories</a>
          <ul>
            <li><a href="#">Menu Plugins</a></li>
            <li><a href="#">Chart Plugins</a></li>
            <li><a href="#container">Slider Plugins</a>
              <ul>
                <li><a href="#">Range Slider</a></li>
                <li><a href="#">Content Slider</a>
                  <ul>
                    <li><a href="#">Image Slider</a></li>
                    <li><a href="#">Any Slider</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" title="#" class="parent">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
        <li><a href="#">Showcase</a></li>
      </ul>
    </div>
  </div>
</div>

2. The required CSS/CSS3 rules for the horizontal navigation bar on large screen devices(min width: 641px).

@media handheld, screen and (min-width: 641px) {

.no_scroll { overflow-y: hidden; }

.menu-toggler { display: none; }

#menu {
  max-width: 960px;
  height: 50px;
  margin: 0 auto;
}

#navigator {
  height: 50px;
  line-height: 50px;
  box-shadow: 0 7px 6px -7px #373435;
  -webkit-box-shadow: 0 7px 6px -7px #373435;
  -moz-box-shadow: 0 7px 6px -7px #373435;
}

#navigator .title { display: none; }

#navigator ul { list-style: none; }

#navigator > ul > li {
  width: 14.28%;
  float: left;
}

#navigator > ul > li > a {
  color: #fefefe;
  font-size: 15px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  display: block;
  background: #333;
}

#navigator > ul > li:hover > a { background: #555; }

#navigator ul li > ul,
 #navigator ul li li > ul,
 #navigator ul li li li > ul,
 #navigator ul li li li li> ul,
 #navigator ul li li li li li > ul { display: none; }

#navigator ul li:hover > ul,
 #navigator ul li li:hover > ul,
 #navigator ul li li li:hover > ul,
 #navigator ul li li li li:hover > ul,
 #navigator ul li li li li li:hover > ul {
  position: absolute;
  z-index: 10;
  width: 180px;
  line-height: 20px;
  display: block;
  background: #555;
  box-shadow: 0 7px 6px -7px #373435;
  -webkit-box-shadow: 0 7px 6px -7px #373435;
  -moz-box-shadow: 0 7px 6px -7px #373435;
}

#menu ul ul li ul {
  top: 0;
  left: 179px;
  min-height: 100%;
  border-left: 1px solid #444;
}

#menu ul ul li { /*position: relative;*/ }

#menu ul ul li a {
  color: #fefefe;
  font-size: 14px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  display: block;
  padding: 12px 7px;
  border-top: 1px solid rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(0,0,0,0.045);
  text-transform: uppercase;
}

#menu ul ul li:hover > a { background: #444; }

#menu ul ul li li:hover > a { }

#menu ul ul li li li:hover > a { }

#menu ul ul li li li li:hover > a { }

#menu ul ul li li li li li:hover > a { }
}

3. The required CSS/CSS3 rules for the off-canvas menu with toggle icon & menu title on small screen devices.

@media handheld, screen and (max-width: 640px) {

.menu-toggler { display: block; }

.menu-toggler span {
  color: #fefefe;
  font-size: 20px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  letter-spacing: 5px;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  background: #333 url() no-repeat 10px center;
  box-shadow: 0 7px 3px -7px #373435;
  -webkit-box-shadow: 0 7px 3px -7px #373435;
  -moz-box-shadow: 0 7px 3px -7px #373435;
}

.open > .menu-toggler {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(225,225,225,0.85);
}

.open > .menu-toggler span { opacity: 0.1 !important; }

.responsive-menu {
  position: fixed;
  z-index: 99;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #555;
  transition: 0.3s;
  box-shadow: -4px 0 15px 0px #373435;
  -webkit-box-shadow: -4px 0 15px 0px #373435;
  -moz-box-shadow: -4px 0 15px 0px #373435;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.open > .responsive-menu { left: 0; }

#navigator .title {
  color: #666;
  font-size: 20px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  text-shadow: 0.8px 0.8px 3px #111;
  height: 60px;
  line-height: 62px;
  display: block;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0,0,0,0.045);
  background: #333 url() no-repeat 20px center;
  box-shadow: -4px 0 5px 0px #373435;
  -webkit-box-shadow: -4px 0 5px 0px #373435;
  -moz-box-shadow: -4px 0 5px 0px #373435;
}

#navigator ul li > ul,
 #navigator ul li li > ul,
 #navigator ul li li li > ul,
 #navigator ul li li li li > ul,
 #navigator ul li li li li li > ul {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0,0,0,0.1);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

#navigator ul li {
  float: none;
  display: block;
}

#navigator ul li a {
  color: #999;
  font-size: 14px;
  display: block;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.045) !important;
  border-bottom: 1px solid rgba(0,0,0,0.045) !important;
}

#navigator > ul > li:hover > a {
  color: #aaa;
  background: #444;
}

#navigator > ul > li > .parent,
 #navigator > ul > li:hover > .parent,
 #navigator > ul > li.hover > .parent,
 #navigator ul li li > .parent,
 #navigator ul li li:hover > .parent,
 #navigator ul li li.hover > .parent {
  background-repeat: no-repeat;
  background-position: 260px center;
}

#navigator > ul > li > .parent,
 #navigator > ul > li:hover > .parent {
  color: #aaa;
  background-color: inherit;
  background-image: url();
}

#navigator > ul > li.hover > .parent {
  color: #aaa;
  background-color: #444;
  background-image: url();
}

#navigator ul li li a {
  color: #aaa;
  font-size: 12px;
}

#navigator ul li li > .parent,
 #navigator ul li li:hover > .parent {
  color: #aaa;
  background-color: inherit;
  background-image: url();
}

#navigator ul li li.hover > .parent {
  color: #aaa;
  background-color: rgba(0,0,0,0.1);
  background-image: url();
}

.nav ul {
  display: none;
  left: -9999px;
}

.nav li.hover > ul,
 .nav li li.hover > ul,
 .nav li li li.hover > ul,
 .nav li li li li.hover > ul,
 .nav li li li li li.hover > ul,
 .nav li li li li li li.hover > ul {
  position: static !important;
  display: block !important;
}
}

@media handheld, screen and (max-width: 480px) {

.open > .responsive-menu { width: 250px; }

#menu > ul > li > .parent,
 #menu > ul > li:hover > .parent,
 #menu > ul > li.hover > .parent,
 #menu ul li li > .parent,
 #menu ul li li:hover > .parent,
 #menu ul li li.hover > .parent {
  background-repeat: no-repeat;
  background-position: 210px center;
}
}
 @media handheld, screen and (max-width: 319px) {

.open > .responsive-menu { width: 200px; }

#menu > ul > li > .parent,
 #menu > ul > li:hover > .parent,
 #menu > ul > li.hover > .parent,
 #menu ul li li > .parent,
 #menu ul li li:hover > .parent,
 #menu ul li li.hover > .parent {
  background-repeat: no-repeat;
  background-position: 150px center;
}
}

4. Include the latest version of jQuery JavaScript library from a CDN.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 

5. The JavaScript to enable the responsive off-canvas menu.

jQuery.noConflict();
jQuery(document).ready(function($){
  $('.abrir_menu').click(function(){
    $("body").toggleClass('no_scroll');
  });
});

jQuery.noConflict();
jQuery(document).ready(function($){
  $(function() {
    initDropDowns($("#menu"));
  });

  function initDropDowns(allMenus) {
    allMenus.children(".abrir_menu").on("click", function() {
      var thisTrigger = jQuery(this),
          thisMenu = thisTrigger.parent(),
          thisPanel = thisTrigger.next();

      if(thisMenu.hasClass("open")){
        thisMenu.removeClass("open");
        jQuery(document).off("click");                                 
        thisPanel.off("click");
      }
      else{	
        allMenus.removeClass("open");	
        thisMenu.addClass("open");
        jQuery(document).on("click", function() {
          allMenus.removeClass("open");
        });
        thisPanel.on("click", function(e) {
          e.stopPropagation();
        });
      }				
      return false;
    });
  }
});

jQuery.noConflict();
jQuery(document).ready(function($){
  $(document).ready(function() {
    $(".nav li a").each(function() {
      if ($(this).next().length > 0) {
        $(this).addClass("parent");
      };
    })
  })

  $(function(){
    $(".nav li").unbind('mouseenter mouseleave');
    $(".nav li a.parent").unbind('click').bind('click', function(e) {
      e.preventDefault();
      $(this).parent("li").toggleClass("hover");
    });
  });
});

---

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