Animated - Hamburger Icon (spans)

animated-hamburger-icon-spans.markdown

Animated - Hamburger Icon (spans)

A Pen by Steven Roberts on CodePen.

License.

index.html

<div class="container">
	<a href="#" class="menu-button [ js-menu-button ]">
	    <div class="menu-icon">
		   <span></span>
		   <span></span>
		   <span></span>
		   <span></span>
	    </div>
	</a>
</div>

script.js

function updateMenuButton() {
	$('.js-menu-button').find('.menu-icon').toggleClass('is-active');
}

$(document).ready(function() {

	$('.js-menu-button').click(function(e){

		e.preventDefault();
		updateMenuButton();

	});

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ededed;
	min-height: 100vh;
}

/////
//
// Menu Icon
//
/////

$menu-icon-width: 3em;
$menu-icon-height: $menu-icon-width * 0.75;
$menu-icon-color: #363636;
$menu-icon-color--active: #D00251;

.menu-icon {
	position: relative;
    width: $menu-icon-width;
	height: $menu-icon-height;
	display: inline-block;
}

.menu-icon span {
    position: absolute;
    height: $menu-icon-width / 16;
    width: 100%;
    background-color: $menu-icon-color;
    transition: all 250ms ease-in-out;
    transform: rotate(0deg);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}

.menu-icon span:nth-child(1) {
    top: $menu-icon-width / 32;
}
	
.menu-icon span:nth-child(2),
.menu-icon span:nth-child(3) {
    top: $menu-icon-width / 3.2;
}

.menu-icon span:nth-child(4) {
    top: $menu-icon-width * 0.625;
}

.menu-button:hover span,
.menu-button:focus span,
.menu-button:active span {
    background: $menu-icon-color--active;
}

.menu-icon.is-active span:nth-child(1),
.menu-icon.is-active span:nth-child(4) {
    opacity: 0; 
}

.menu-icon.is-active span:nth-child(2) {
    transform: rotate(45deg);
}

.menu-icon.is-active span:nth-child(3) {
	top: $menu-icon-width / 3.2;
	transform: rotate(-45deg);
}