JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

<div class="grid__container grid__header">
            <div class="grid__logo--header">
                <h3>
                    Site.com
                </h3>
            </div>
            <div class="grid__menu">
                <div class="menu__button" id="menu_button">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

CSS

.menu__button {
    color: #ff4081;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    width: 60px;
    height: 45px;
    position: relative;
    margin: 50px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.menu__button span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #ff4081;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.menu__button span:nth-child(1) {
  top: 0px;
}

.menu__button span:nth-child(2) {
  top: 18px;
}
.menu__button--active span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.menu__button--active span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.menu__button--active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.menu__button span:nth-child(3) {
  top: 36px;
}

JavaScript

(function () {    
    var activeModificator = "--active";
    var topMenuButton = document.querySelector("#menu_button");   
    var topMenuClassName = 'menu__button';
    
    
    topMenuButton.addEventListener('click', topMenu);
    
     
    function topMenu () {        
        toggleClass(topMenuClassName,topMenuButton);
    }; 
    function toggleClass(className, elem, active) {     
        var activeName = (active === undefined) ? activeModificator : active;
        var element = (elem === undefined) ? className : elem;
        element.classList.toggle(className);
        element.classList.toggle(className + activeName);
    }

})();