Pure CSS/CSS3 hamburguesa menú de alternancia

Vista prévia

Descripción

Un menú de alternancia animado que revela un menú desplegable cuando haces clic en el botón de hamburguesa, construido usando SASS/CSS/CSS3.

Funcionamiento

Construye la estructura HTML para el menú de alternancia de hamburguesas.

<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>

Personaliza el menú de alternancia de hamburguesas en 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);
		}
	}
}