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(e) {
    e.stopPropagation();
    $('.headnav').addClass('open').animate({
        top: "0"
    },400);		       
    $(this).addClass('open');
    $(this).off("click", handler1).on("click", handler2);
}
function handler2(e) {
    e.stopPropagation();
    $('.headnav').removeClass('open').animate({
        top: "-100%"
    },400);
    $('.menuBtn').removeClass('open');
    $('.menuBtn').off("click", handler2).on("click", handler1);
}             
 
$(".menuBtn").one("click", handler1);

$('body').click(function(event) { 
    if(!$(event.target).closest('.headnav.open').length) {
        if($('.headnav').hasClass("open")) {
            $('.headnav').removeClass('open').animate({
                top: "-100%"
            },400);
            $(".menuBtn").on("click", handler1);
        }
    }             
});