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);
  });


  $('.closed').click(function() {
    $('.menu').animate({
      left: "-285px"}, 200);
    $('.icon-menu').show();
  });
};

$(document).ready(main);


	$(document).click(function(e) {
	    //if the menu is visible
	    if($(".menu").css('left') =="0px"){
	        //if the click is outside of menu
	        if($(e.target).closest('.menu').length == 0){
	            $('.closed').click();
	        } 
	    }       
	});