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%;
  padding: 0;
  margin: 0;
}
#menu {
  position: absolute;
  width: 285px;
  left: -285px;
  background: red;
}
#body {
  position: relative;
  left: 0px;
}
.icon-menu {
    background: black;
    color: #fff;
    cursor: pointer;
}

JavaScript

var menuStatus = function() {
    if($('#menu').css('left') == '0px') return true;
};
var menuOpen = function() {
    $('#menu').animate({ left: "0px" }, 400);
    $('#body').animate({ left: "285px" }, 400);
};
var menuClose = function() {
    $('#menu').animate({ left: "-285px" }, 400);
    $('#body').animate({ left: "0px" }, 400);
};
var menuToggle = function() {
    // If its open close it, if its closed open it
    if(menuStatus()) return menuClose();
    menuOpen();
};
$(document).on('click', function (e) {
    // Check to see if the click event was triggered inside the menu
    var isMenuElem = $(e.target).parents('.menu').length|| $(e.target).is('.menu');
    // Check to see if it was the close icon
    var isMenuClose = $('.icon-close').has(e.target).length;
    // check to see if it was the open icon
    var isMenuOpen = $(e.target).is('.icon-menu');
    // If its a menu element and not the close icon don't continue
    if(isMenuElem && !isMenuClose) return;
    // if the menu is closed and the open icon was not clicked don't continue
    if(!menuStatus() && !isMenuOpen) return;
    // toggle the menu
    menuToggle();
});