<h3 id="menu-toggle">Menu</h3>
<ul id="menu">
  <li><a href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
    </ul>
  </li>
  <li><a href="#">Products</a>
    <ul class="sub-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">Javascript</a>
        <ul class="sub-menu">
          <li><a href="#">jQuery</a></li>
          <li><a href="#">MooTools</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>           
</ul>

#menu, .sub-menu {
  display: none;
  list-style: none;
}

/*Change toggle size by adjusting width & height*/
.tb-menu-toggle {
  border: 0;
  position: relative;
  background: transparent;
  cursor: pointer;
}

/*Change toggle color here*/
.tb-menu-toggle i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  -webkit-transition:all .2s;
   -moz-transition:all .2s;
     -o-transition:all .2s;
        transition:all .2s;
}
.tb-menu-toggle i:nth-child(2) {
  top: 40%;
}
.tb-menu-toggle i:nth-child(3) {
  top: 80%;
}

/* Style the active toggle here */
.tb-menu-toggle.tb-active-toggle i {  }

/*Animation of the toggle*/
.tb-menu-toggle.tb-animate-toggle i:first-child,
.tb-menu-toggle.tb-animate-toggle i:nth-child(2){ 
  top: 40%;
  -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);
} 
.tb-menu-toggle.tb-animate-toggle i:nth-child(3){ 
  top: 40%;
  -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
     -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
}

$.fn.extend({
  
  // Define the threeBarToggle function by extending the jQuery object
  threeBarToggle: function(options){
    
    // Set the default options
    var defaults = {
      color: 'black',
      width: 30,
      height: 25,
      speed: 400,
      animate: true
    }
    var options = $.extend(defaults, options); 
    
    return this.each(function(){
      
      $(this).empty().css({'width': options.width, 'height': options.height, 'background': 'transparent'});
      $(this).addClass('tb-menu-toggle');
      $(this).prepend('<i></i><i></i><i></i>').on('click', function(event) {
        event.preventDefault();
        $(this).toggleClass('tb-active-toggle');
        if (options.animate) { $(this).toggleClass('tb-animate-toggle'); }
        $('.tb-mobile-menu').slideToggle(options.speed);
      });
      $(this).children().css('background', options.color);
    });
  },
  
  // Define the accordionMenu() function that adds the sliding functionality
  accordionMenu: function(options){
    
    // Set the default options
    var defaults = {
      speed: 400
    }
    var options =  $.extend(defaults, options);

    return this.each(function(){
      
      $(this).addClass('tb-mobile-menu');
      var menuItems = $(this).children('li');
      menuItems.find('.sub-menu').parent().addClass('tb-parent');
      $('.tb-parent ul').hide();
      $('.tb-parent > a').on('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).siblings().slideToggle(options.speed);
      });
      
    });
  }
});

// Convert any element into a three bar toggle
// Optional arguments are 'speed' (number in ms, 'slow' or 'fast') and 'animation' (true or false) to disable the animation on the toggle
$('#menu-toggle').threeBarToggle({color: 'green', width: 30, height: 25});

// Make any nested ul-based menu mobile
// Optional arguments are 'speed' and 'accordion' (true or false) to disable the behavior of closing other sub
$('#menu').accordionMenu();