JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MenuButton">MENU</div>
	<ul>
    	<li class="TopList1">TOP 1</li>
        <li class="TopList2">TOP 2</li>
        <li class="LeftList1">LEFT 1</li>
        <li class="LeftList2">LEFT 2</li>
    </ul>

CSS

.TopList1 {
	position: absolute;
	bottom: 31%;
	left: 5%;
	word-break: break-all;
	width: 35px;
	border-style: solid;
	border-color: green;
	border-width: thick;
	padding: 0%;
	margin: 0%;
	display: none;
}
.TopList2 {
	display: none;
	position: absolute;
	bottom: 56%;
	left: 5%;
	word-break: break-all;
	width: 35px;
	border-style: solid;
	border-color: green;
	border-width: thick;
	padding: 0%;
	margin: 0%;
}
.LeftList1 {
	display: none;
	position: absolute;
	bottom: 50px;
	left: 8.5%;
	width: 150px;
	border-style: solid;
	border-color: green;
	border-width: thick;
	padding: 0%;
	margin: 0%;
}
.LeftList2 {
	display: none;
	position: absolute;
	bottom: 50px;
	left: 18.8%;
	width: 150px;
	border-style: solid;
	border-color: green;
	border-width: thick;
	padding: 0%;
	margin: 0%;
}
.MenuButton {
	font-size: 1em;
	font-weight: bold;
	word-break: break-all;
	width: 40px;
	line-height: 45px;
	border-style: double;
	border-color: red;
	border-width: thick;
	position: fixed;
	bottom: 50px;
	left: 5%;
}

JavaScript

$(document).ready( function() {						
	if ( !$(".TopList1").is(":visible")  ) { 
		$('.MenuButton').click(function() {			
			$( ".TopList1" ).toggle("slide", {direction: "down"}, 1000);
			$( ".TopList2" ).delay(800).toggle("slide", {direction: "down"}, 800);
			$( ".LeftList1" ).toggle("slide", {direction: "left"}, 1000);
			$( ".LeftList2" ).delay(800).toggle("slide", {direction: "left"}, 1000);
		});
	} else if ( $(".TopList1").is(":visible")  )  {
		$('.MenuButton').click(function() {			
			$( ".TopList1" ).toggle("slide", {direction: "down"}, 800);
			$( ".TopList2" ).toggle("slide", {direction: "down"}, 800);
			$( ".LeftList1" ).toggle("slide", {direction: "left"}, 800);
			$( ".LeftList2" ).toggle("slide", {direction: "left"}, 800);
		});
	}
});