JSFiddle - React, Tailwind, and code Playground

by budapesti

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