Animated Menu

by Renan Ribeiro Brando

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

CSS

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  min-height: 100vh;
}
.menu-icon {
  position: relative;
  width: 3em;
  height: 2.25em;
  display: inline-block;
}
.menu-icon span {
  position: absolute;
  height: 0.5em;
  width: 100%;
  background-color: #fff;
  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: 0.09375em;
}
.menu-icon span:nth-child(2), .menu-icon span:nth-child(3) {
  top: 0.9375em;
}
.menu-icon span:nth-child(4) {
  top: 1.875em;
}
.menu-button:hover span, .menu-button:focus span, .menu-button:active span {
  background: #fff;
}
.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: 0.9375em;
  transform: rotate(-45deg);
}

JavaScript

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

$(document).ready(function() {

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

		e.preventDefault();
		updateMenuButton();

	});

});