JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<a href="" class="menu-link">
    <div class="menu-icon">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
    </div>
    <div class="menu-text">MENU</div>
</a>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Family</a></li>
        <li><a href="#">The Event</a></li>
    </ul>
</nav>

CSS

.menu-link{
    display: block;
    position: absolute;
    z-index: 10;
}
.menu-icon, .menu-text{
    display: block;
    float: left;
}
.menu-icon{
    width: 21px;
}
.menu-text{
    font: normal 18px/16px Arial, sans-serif;
    color: #000;
    display: block;
    float: left;
    padding: 0 0 0 6px;
}
.menu-link span{
    position: relative;
    display: block;
    border-top: solid 2px #000;
    margin-bottom: 4px;
    transform: rotate(0deg);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-property: transform, top, bottom, border;
    transition-duration: 0.3s;
    transition-property: transform, top, bottom;
}
.menu-link:hover span, .menu-link.active span{
    border-top: solid 3px #000;
    margin-bottom: 3px;
}
.menu-link:hover .menu-text, .menu-link.active .menu-text{
    font-weight: bold;
}
.menu-link.active .top, .menu-link.active .bottom{
    transform: rotate(45deg);
    left: 0px;
}
.menu-link .top{
    top: 0px;
}
.menu-link.active .top{
    top: 6px;
}
.menu-link.active .middle{
    visibility: hidden;
}
.menu-link .bottom{
    bottom: 0px;
}
.menu-link.active .bottom{
    transform: rotate(-45deg);
    bottom: 6px;
}
nav{
    background: #ccc;
    width: 25%;
    height: 100%;
    position: absolute;
    left: -25%;
    top: 0;
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.3s;
    transition-property: left;
    transition-duration: 0.3s;
}
nav.active{
    left: 0%;
}
nav ul{
    list-style: none;
    padding: 40px 0 0;
}
nav ul li{
    padding: 0 0 1px;
}
nav ul li a{
    display: block;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    font: 16px Arial, sans-serif;
    -webkit-transition-property: padding;
    -webkit-transition-duration: 0.3s;
    transition-property: padding;
    transition-duration: 0.3s;
}
nav ul li a:hover{
    padding-left: 18px;
}

JavaScript

$("a").click(function(e){
    e.preventDefault();
    $('.menu-link').toggleClass("active");
    $('nav').toggleClass("active");
});