JSFiddle - React, Tailwind, and code Playground

by atif_kht

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<div class="hamburger-menu">
  <div></div>
  <div></div>
  <div></div>
</div>


<h3>
By Syed Atif Naeem
</h3>

SCSS

.hamburger-menu {
  cursor: pointer;
  
  div {
    background: #000;
    width: 31px;
    height: 4px;
    margin-bottom: 7px;
    transition: all 0.3s linear;
    opacity: 1;
    
    &:last-child {
      width: 17px;
    }
  
  } // end div
  
  &:hover div:first-child {
    width: 17px;
  }
  
  &.open div:nth-child(1) {
    -webkit-transform: translateY(13px) rotate(45deg);
    -ms-transform: translateY(13px) rotate(45deg);
    transform: translateY(13px) rotate(45deg);
  }
  
  &.open div:nth-child(2) {
    opacity: 0;
  }
  
  &.open div:nth-child(3) {
    width: 31px;
    -webkit-transform: translateY(-9px) rotate(-45deg);
    -ms-transform: translateY(-9px) rotate(-45deg);
    transform: translateY(-9px) rotate(-45deg);
  }
  
  &.open:hover div:first-child {
    width: 31px;
  }
  
} // end menu

JavaScript

(function(){
	$('.hamburger-menu').click(function(){
  	$(this).toggleClass('open');
  });

})();