JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id="mobile-side-menu"></div>
<button id="menuBtn">Push me</button>

CSS

html { height: 100%; width: 100%; }

#mobile-side-menu {
    position: absolute;
    width: 250px;
    top: 0;
    bottom: 0;
    background-color: red;
    left: -250px;
}

#menuBtn {
    position: absolute;
    top: 20px;
    right: 20px;
}

JavaScript

$('#menuBtn').on('click', function() {
    var menu = $('#mobile-side-menu');

    console.log(menu.css('left'));
    if( menu.css('left') === '-250px' ) {
        menu.animate({left: 0}, 400, function(){
            positionValue = 0;
        });
    } else { 
        menu.animate({'left': -250},400);
    }
});