JSFiddle - React, Tailwind, and code Playground

by Michael Wagner

HTML

<div class="nav">
  <div class="burger-menu">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

.nav {
  height: 50px;
  width: 100%;
  background-color: #000;
}

.burger-menu {
  height: 25px;
  width: 25px;
  float: right;
  padding: 15px 20px;
}

.burger-menu div {
  background-color: #fff;
  height: 4px;
  width: 25px;
  margin-bottom: 3px;
  opacity: 1;
  position: relative;
  float: right;

}

JavaScript

var menuClicked = false;

$('.burger-menu').click(function() {
  var opacityVal;
  var topRotationVal;
  var bottomRotationVal;
  var topMargin;
  var bottomMargin;
  
  if (menuClicked) {
    opacityVal = '1';
    topRotationVal = 'rotate(0deg)';
    bottomRotationVal = 'rotate(0deg)';
    topMargin = '0';
    bottomMargin = '0';
    menuClicked = false;
  } else {
  	opacityVal = '0';
    topRotationVal = 'rotate(45deg)';
    bottomRotationVal = 'rotate(-45deg)';
    topMargin = '9px';
    bottomMargin = '-14px';
    menuClicked = true;
  }
  $('.burger-menu div:nth-child(2)').animate({opacity: opacityVal}, 100, function() {
    $('.burger-menu div:nth-child(1)').css({
      'transform': topRotationVal,
      'margin-top': topMargin
    });
    $('.burger-menu div:nth-child(3)').css({
      'transform': bottomRotationVal, 
      'margin-top': bottomMargin
    });
  });
});