JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menu">
  <span class="glyphicon glyphicon-remove closed pull-right"></span>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
</div>

<div class="icon-menu">
    <span class="glyphicon glyphicon-menu-hamburger"></span>MENU
</div>

CSS

.menu {
	position: fixed;
	width: 285px;
	height: 100%;
	left: -285px;
	background: #202024;
	z-index: 1;
}

.glyphicon-remove, ul {
    color: #fff;
    padding: 10px;
}

JavaScript

"use strict";

var main = function() {
  $('.icon-menu').click(function() {
    $('.icon-menu').hide();
    $('.menu').animate({
        left: "0px"}, 200,function() {
            
            $(document).on("click.menu",function(event) {
                var target = $(event.target);   console.log(target);
                if (!target.closest(".menu").length || target.closest(".closed").length) {
                    closeMenu(function() {
                        $(document).off("click.menu");
                    });
                }           
            })  
        
        });
  });


  
    function closeMenu(callback) {  
        $('.menu').animate({
          left: "-285px"}, 200);
          $('.icon-menu').show();
       if ($.isFunction(callback)) callback();
    }    
  
        
};

$(document).ready(main);