JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div class="burger_click">
  <div class="line1" "line4"></div>
  <div class="line2" "line5"></div>
  <div class="line3" "line6"></div>
</div>
<ul class="desktope">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div class="hide">
<ul id="mobile">
  <li id="first">A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>G</li>
</ul>
</div>

CSS

.desktope{
  background-color:green;
  cursor:pointer;
  font-size:30px;
  display:flex;
  justify-content:space-around;
}
.hide{
  display:none;
}
@media screen and (max-width: 480px) {
    body {
        background-color: silver;
    }
    .desktope{
     display:none;
    }
    .hide{
      display:block;
    }
    #mobile{
      height:100vh;
      width:100%;
  display:none;
  color:#fff;
  background-color:#151B27;
  cursor:pointer;
  font-size:30px;
}
.line1{
  transition:all .5s;
  height:5px;
  width:40px;
  background-color:#fff;
  margin-bottom:5px;
}
.line2{
  transition:all .5s;
    height:5px;
  width:40px;
  background-color:#fff;
   margin-bottom:5px;
}
.line3{
  transition:all .5s;
    height:5px;
  width:40px;
  background-color:#fff;
}
.line4{
  background-color:#FFBB00;
 transition:all .5s;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.line6{background-color:#FFBB00;
  transition:all .5s;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
.line5{
    transition:all .5s;
    opacity:0;
}
.burger_click{
  padding-top:20px;
  padding-bottom:20px;
  background-color:#151B27;
 cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
}

JavaScript

$(document).ready(function(){
    $(".burger_click").click(function(){
        $("#mobile").slideToggle("slow");
    });
});
$(document).ready(function(){
    $("li").click(function(){
        $("#mobile").slideToggle("slow");
         $(".burger_menu_block_off").toggleClass("burger_menu_block_on");
            $(".line1").toggleClass("line4");
            $(".line3").toggleClass("line6");
            $(".line2").toggleClass("line5");
    });
});

 $(document).ready(function() {
         $('.burger_click').click(function() {
          $(".burger_menu_block_off").toggleClass("burger_menu_block_on");
            $(".line1").toggleClass("line4");
            $(".line3").toggleClass("line6");
            $(".line2").toggleClass("line5");
         });
         });