JSFiddle - React, Tailwind, and code Playground

by Ashish Sharma

HTML

<div id="menuC" align="center"><img src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-128.png" height="40px" width="40%" />
</div>
<div id="close"><b>X</b></div>
<div id="id1">
    
    <ul>
      <li id="list1"><a href="http://www.xeemez.blogspot.com">1 Some<br><span id="span1">Description 1</span></a></li>
      <li id="list2"><a href="http://www.xeemez.blogspot.com">2 Some<br><span id="span2">Description 2</span></a></li>
      <li id="list3"><a href="http://www.xeemez.blogspot.com">3 Some<br><span id="span3">Description 3</span></a></li>
      <li id="list4"><a href="http://www.xeemez.blogspot.com">4 Some<br><span id="span4">Descript 4</span></a></li>
      <li id="list5"><a href="http://www.xeemez.blogspot.com">5 Some<br><span id="span5">Description 5</span></a></li>
    <ul>
</div>
<h1>Some Heading</h1>
<div>Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum Main Content Lorem Ipsum...

CSS

.menu{
 display: none;
    
}

#id1{
    height:100%;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    z-index:1;
    background:rgb(230,230,230);
}

#id1 ul li{
    height:18%;
    width:90%;
    background:rgb(200,200,200);
    margin-top:2px;
    transition:1s;
    border-bottom:2px black solid;
    padding-top:20px;
}
#id1 ul li:hover{
    height:40%;
    width:90%;
    background:rgb(160,160,160);
    border-top:2px black solid;
}
#id1 ul{
  height:60%;
  text-align: center;
  list-style-type: none;

}
#close{
    position:fixed;
    top:50px;
    right:1%;
    font-size:20px;
    background:rgb(130,230,130);
    border:2px black solid;
    border-radius:10px;
    cursor: pointer;
    height:24px;
    width:24px;
    text-align: center;
    color:white;
    z-index:2;
}
#menuC img{
    cursor: pointer;
}
#id1 ul li a{
    display:block;
    height:100%;
    text-decoration:none;
    font-size:17px;
}
#id1 ul li a span{
    color:white;
    font-size:20px;
}

JavaScript

$('#id1').addClass("menu");
 $('#span1, #span2, #span3, #span4,#span5 ,#close').addClass("menu");
$("#menuC img").click(function(){
    $('#id1').toggle("puff",500,function(){
    $('#close').toggle("bounce",1000);
    });
});

$("#close").click(function(){
$('#id1').slideToggle(1500,"easeOutBounce",function(){
    $("#close").toggle("puff",200);
    });
});
$("#list1").hover(function(){
 $("#span1").fadeToggle(500,function(){
    
    });
});
$("#list2").hover(function(){
 $("#span2").fadeToggle(200,function(){
    
    });
});
$("#list3").hover(function(){
 $("#span3").fadeToggle(200,function(){
    
    });
});
$("#list4").hover(function(){
 $("#span4").fadeToggle(200,function(){
    
    });
});
$("#list5").hover(function(){
 $("#span5").fadeToggle(200,function(){
    
    });
});