JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

HTML

<div class="menu" id="menu">
    <div class="icon-close">
        <img src="close.png" id="close">
    </div>
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Gallery</a>

        </li>
        <li><a href="#">Locations</a>

        </li>
        <li><a href="#">Contact Us</a>

        </li>
    </ul>
</div>
<div id="body">
    <div class="jumbotron">
        <div class="icon-menu" id="open"> <i class="fa fa-bars" id="open"></i>Menu</div>
    </div>
</div>

CSS

html, body, #menu, #body {
    height: 100%;
}
.menu {
    position: absolute;
    width: 285px;
    left: -285px;
}
#body {
    position: absolute;
    left: 0px;
    right: 0px;
}
/* Styling */
 *, *:before, *:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#menu {
    background-color: rgb(40, 140, 240);
    color: #FFF;
}
#menu * {
    color: inherit;
}
#menu a {
    padding: 15px;
    padding-left: 20px;
    display: inline-block;
    text-decoration: none;
    width: 100%;
}
#menu a:hover {
    background: rgb(30, 130, 230);
}
.icon-menu {
    padding: 15px;
    padding-left: 20px;
}
.text {
    padding: 15px;
}
.jumbotron {
    background: rgb(50, 150, 250);
    color: #FFF;
}

JavaScript

$(document).on('click', function (e) {
    if ($("#menu").position().left != '0') {
        if (e.target.id === "open") {
            $('#menu').animate({
                left: "0px"
            }, 400);
            $('#body').animate({
                left: "285px"
            }, 400);
        }
    } else {
        if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
            $('#menu').animate({
                left: "-285px"
            }, 400);
            $('#body').animate({
                left: "0px"
            }, 400);
        }
    }
});