JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
<span id="option-1">Menu 1</span></br>
<span id="option-2">Menu 2</span></br>
<span id="option-3">Menu 3</span></br>
<span id="option-4">Menu 4</span></br>
<span id="option-5">Menu 5</span>
</div>

CSS

#menu{
position:absolute;
background-color:black;
left:-250px;
height:100%;
width:300px;
}
#option-1{
color:white;
display:none;
left:15px;
font-size:18px;
}
#option-2{
color:white;
display:none;
left:15px;
font-size:18px;
}
#option-3{
color:white;
display:none;
left:15px;
font-size:18px;
}
#option-4{
color:white;
display:none;
left:15px;
font-size:18px;
}
#option-5{
color:white;
display:none;
left:15px;
font-size:18px;
}

JavaScript

$("#menu").mouseenter (function(){
$("#menu").animate({left: "0px"}, 500, function(){
      $("#option-1, #option-2, #option-3, #option-4, #option-5").show();
      });
});
$("#menu").mouseleave (function(){
$("#menu").animate({left: "-250px"}, 500, function(){
     $("#option-1, #option-2, #option-3, #option-4, #option-5").hide();
     });
});