JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- site navigation - menu sliding -->
<nav id="menu">
    <ul>
        <li> 11234567890</li>
        <li> 21234567890</li>
        <li> 31234567890</li>
        <li> 41234567890</li>
        <li> 51234567890</li>
    </ul>
</nav><div id="mypanel"></div>

CSS

nav {
    display: none;
}
* {
    margin: 0;
    padding: 0;
}
div {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;    
}
div.open {
    
}
#menu.transition-ease-in + #mypanel{
    /*transition: transform 0.4s ease;*/
    transition: transform 0.4s ease;
     transform: translate(350px,0);
}
#menu.transition-ease-out + #mypanel {
    transition: transform 0.4s ease;
    transform: translate(0,0);
}
#mypanel{
    
    
}
}

JavaScript

$("#mypanel").on('click', function(event){
    if($(this).hasClass('open')){
        $("#menu").css('display',"none");                $("#menu").addClass('transition-ease-out').removeClass('transition-ease-in'); 
        $(this).removeClass('open');
    } else {
         $("#menu").css('display',"inline-block"); 
        $("#menu").addClass('transition-ease-in').removeClass('transition-ease-out'); 
        $(this).addClass('open');
    }       
    
});