JSFiddle - React, Tailwind, and code Playground

HTML

<a class="menuBtn">Menu Button</a>

<ul class="headnav">
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>

CSS

.menuBtn {
    margin-top: 150px;
    margin-left: 50px;
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    cursor: pointer;
}
.headnav {
    padding: 0px;
    margin: 0px;
    list-style: none;
    width: 100%;
    position: absolute;
    background-color: black;
    color: #fff;
    padding:20px;
    top:-100%;
}
.headnav li { 
    display: inline-block;
    margin-right: 20px;
}
.headnav.open {
    top: 0px;
}

JavaScript

function handler1() {
    $('.headnav').addClass('open').animate({
        top: "0"
    },400);		       
    $(this).addClass('open');
    $(this).one("click", handler2);
}
function handler2() {
    $('.headnav').removeClass('open').animate({
        top: "-100%"
    },400);
    $('.menuBtn').removeClass('open');
    $('.menuBtn').one("click", handler1);
}             
 
$(".menuBtn").one("click", handler1);