Pure CSS/CSS3 Hamburger Toggle Menu

An animated toggle menu that reveals a dropdown menu when you click/tap on the hamburger button, built using SASS/CSS/CSS3.

How to use it:

Build the html structure for the hamburger toggle menu.

<button class="hamburger-menu">
  <span>Menu</span>
</button>
<div class="menu-holder">
  <nav>
    <ul>
      <li><a href="javascript:void(0);">Home</a></li>
      <li><a href="javascript:void(0);">About me</a></li>
    </ul>
  </nav>
</div>

Customize the hamburger toggle menu in the SASS.

// Alignement
$centered: true; // Turn false if you want it in the left side;
$hamburger-size: 48px; // If you care about Google Pagespeed Insights, don't use values lower than this;
$bar-size: 5px; // If you change this, you will probably need to change bar-margin too, so play with it;
$bar-margin: 2; // It will take bar-size and multiply by this number to make a nice space between them;
// Another configuration I like;
// $hamburger-size: 48px; // If you care about Google Pagespeed Insights, don't use values lower than this;
// $bar-size: 3px; // If you change this, you will probably need to change bar-margin too, so play with it;
// $bar-margin: 3; // It will take bar-size and multiply by this number to make a nice space between them;
// Colors
$bar-color: #fff;
$background-color: #607D8B;
// Makes the transitions;
@mixin transitions {
	span {
	background:transparent;
		&:before {
			transition: top .3s 0s, transform .3s .3s;
			top: 0;
			transform: rotate(45deg);
		}
		&:after {
			transition: bottom .3s 0s, transform .3s .3s;
			bottom: 0;
			transform: rotate(-45deg);
		}
	}
}