JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div class="menu">
    <ul>
        <li>home</li>
        <li>about</li>
        <li>contact us</li>
    </ul>
    <div id="button">
<article class="first_line">|</article>
<article class="second_line">|</article>
</div>
</div>

CSS

.menu{
    width:100%;
    background-color:tranperent;
    display:flex;
    justify-content:center;
}
ul{
background-color:red;
list-style:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
flex-direction:column;
padding-left:0px;

}
li{
    width:100px;
    text-align:center;
    font-size:20px;
    margin:2px;
    background-color:white;
    word-wrap:wrap;
     transition:all .5s;
     margin-top:2px;
     margin-bottom:2px;
}
li:hover{
    opacity:.8;
    transition:all .5s;
    background-color:red;
    color:white;
}
#button{
    position: fixed;
    left:400px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    justify-content:space-around;
    height:50px;
    width:50px;
    background-color:red;
     transition:all .5s;
}
.first_line{
   font-size:40px;
    color:white;
    transition:all .5s;

}
.second_line{
    font-size:40px;
    color:white;
transition:all .5s;
}
#button:hover .first_line{
     transition:all .5s;
     transform: rotate(45deg)translateY(-10px) translateX(10px);
}
#button:hover .second_line{
        transform: rotate(-45deg) translateY(-10px) translateX(-10px);
  transition:all .5s;
}
#button:hover{
    background-color:black;
 transition:all .5s;
}

JavaScript

$("#button").click(function(){
        $("ul").fadeToggle("slow");
            });