almazka987/js-hamburger-button-menu.md

## js-hamburger-button-menu.md

      
    Raw
  

              js-hamburger-button-menu.md
            
          
    Hamburger mobile menu

Download 1 - hamburgers css library and 2 - animate.css library too - and include the CSS in the <head> of your site:
<link rel="stylesheet" href="animate.min.css">
<link href="dist/hamburgers.css" rel="stylesheet">
Or use hamburgers scss source files with your Sass CSS precompiler. Customize and compile it here.
in _base.scss:
.hamburger {
  display: none;
}
in responsive.scss:
/* max-width: 767px */
@media screen and (max-width: 767px) {
  .hamburger {
    display: inline-block;
  }
}
Add the base hamburger markup and append the class name of the type of hamburger you’re craving:
<button class="hamburger hamburger--squeeze" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>  
in JS file:
// Mobile Menu
$('.hamburger').click(function() {
    $('#primary-navbar-collapse').stop().slideToggle().toggleClass('animated slideInTop');
    $(this).stop().toggleClass('is-active');
});

// Close mobile menu
$('.mobile #menu-primary li a, .tablet #menu-primary li a').on("click", function() {
    $('.hamburger').click();
});