JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuWrap"> <a href="#" class="button"> MENU </a>

    <nav class="menu">
        <ul>
            <li>Lorem ipsum dolor</li>
            <li>Aenean commodo</li>
            <li>Aenean massa</li>
            <li>Lorem ipsum</li>
            <li>Aenean</li>
            <li>Aenean massa</li>
            <li>Lorem ipsum</li>
            <li>Aenean</li>
            <li>Aenean massa cum</li>
        </ul>
    </nav>
</div>

CSS

.button {
    display: block;
    background-color: gray;
    height: 50px;
    width: 50px;
}
.menuWrap {
    width: 500px;
    background-color: lightblue;
}
.menu {
    position: relative;
    /* left:250px; */
    left:0;
    width: 250px;
    background-color: orange;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

JavaScript

$(document).ready(function () {
    $('.button').click(function () {
        var $menu = $('.menu'),
            val = $menu.css('left') === '250px' ? '0px' : '250px';
        $menu.animate({
            left: val
        }, 300)
    });
});