JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

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:-250px;
        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)
    });
});