Author: | thiagobako |
---|---|
Views Total: | 4,040 views |
Official Page: | Go to website |
Last Update: | April 3, 2016 |
License: | MIT |
Preview:

Description:
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); } } }