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="inv"></div><!-- Added an invisible block -->
<div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span>

    <ul>
        <li>Link
        <ul class="test">
        <li> test</li>
        </ul>
        </ul>
        </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;
}
/* Added an invisible block */
.inv {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    margin:0;
}
.test{
  }
}

JavaScript

"use strict";

var main = function () {
    $('.icon-menu').click(function () {
        $('.icon-menu').hide();
        $('.inv').show(); //added
        $('.menu').animate({
            left: "0px"
        }, 200);
    });
    //Added
    $('.inv').click(function () {
        $('.inv').hide();
        $('.menu').animate({
            left: "-285px"
        }, 200);
        $('.icon-menu').show();

    });


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

    });
};

$(document).ready(main);