Google Material Design inspired menu button

by katalin_2003

HTML

<div class="menu">
  <span></span>
</div>

CSS

body {
  background-color: #f9f9f9;
  margin: 80px 0;
}

.menu span,
.menu span::before,
.menu span::after {
  content: "";
  display: block;
  height: 12px;
  width: 100%;
  background-color: #2196F3;
}

.menu {
  width: 85px;
  height: 36px;
  margin: 0 auto;
  padding-top: 24px;
  cursor: pointer;
}

.menu span::before {
  -webkit-transform: translate(0, -24px);
  transform: translate(0, -24px);
}

.menu span::after {
  -webkit-transform: translate(0, 12px);
  transform: translate(0, 12px);
}

.menu.open span {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.menu.open span::before {
  width: 60%;
  -webkit-transform: rotate(45deg) translate(20px, -40px);
  transform: rotate(45deg) translate(20px, -40px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.menu.open span::after {
  width: 60%;
  -webkit-transform: rotate(-45deg) translate(29px, 32px);
  transform: rotate(-45deg) translate(29px, 32px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.menu.close span {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.menu.close span::before {
  width: 100%;
  -webkit-transform: rotate(0deg) translate(0, -24px);
  transform: rotate(0deg) translate(0, -24px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.menu.close span::after {
  width: 100%;
  -webkit-transform: rotate(0deg) translate(0, 12px);
  transform: rotate(0deg) translate(0, 12px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

JavaScript

/*
// csa: Initial jQuery version.
function toggleMenu() {
  var menu = $(this);

  if (menu.hasClass('open')) {

    menu.addClass('close');
    menu.one('transitionend', function() {
      menu.removeClass('open close');
    });

  } else {
    menu.addClass('open');
  }
}

$('.menu').click(toggleMenu);
*/

// Vanilla JS :)
function toggleMenuJS() {
  var menuJS = this;

  if (menuJS.classList.contains('open')) {
    menuJS.classList.add('close');
    menuJS.addEventListener('transitionend', function remClasses() {
      menuJS.classList.remove('open', 'close');
      menuJS.removeEventListener('transitionend', remClasses);
    });
  } else {
    menuJS.classList.add('open');
  }
}


var menuEl = document.getElementsByClassName('menu');
menuEl[0].addEventListener('click', toggleMenuJS);