JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div id="container">
    <div id="menu">
        <div class="menu_head"><h1>MENU</h1></div>
        <div class="menu_item"><a href="#">Link 1</a></div>
        <div class="menu_item"><a href="#">Link 2</a></div>
        <div class="menu_item"><a href="#">Link 3</a></div>
        <div class="menu_item"><a href="#">Link 4</a></div>
        <div class="menu_item"><a href="#">Link 5</a></div>
    </div>
    <div id="content">
        <div class="top"> <a class="top_button">
            <div class="button_strips"></div>
            <div class="button_strips"></div>
            <div class="button_strips"></div>
          </a>
        </div>
        <div class="display">
            <!-- Add text when needed /-->
        </div>
    </div>
</div>

CSS

* {
    font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
    background: #c3c3c3;
    font-weight: 300;
    margin: 0;
}
#container {
    position: relative;
    background: black;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}
#menu {
    background: #000;
    height: 100%;
    width: 70%;
    margin: 0;
    padding: 0;
    color: white;
    margin-left: -71%;
    float: left;
}
.menu_item {
    width: 100%;
    border-bottom: solid 1px #333;
    background: #222222;
    height: 40px;
    font-size: 14px;
    color: #fff;
}
.menu_item a {
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 0 0 15px;
}
.menu_head {
    height: 47px;
}
.menu_head h1 {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 0 15px 10px;
    margin: 0;
    background: #000;
    border-bottom: solid 1px #333;
}
#content {
    color: white;
    overflow: hidden;
}
.top_button {
    border: none;
    background: black;
    position: absolute;
    top: 11px;
    left: 18px;
}
.button_strips {
    width: 21px;
    height: 3px;
    margin: 3px 5px;
    background: white;
}
.top {
    height: 46px;
    border-bottom: solid 1px #333;
    position: relative;
}
.display {
    text-align: right;
    white-space: nowrap
}
p {
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {
    // Set menu_out var, for clicks to activate slideIn/Out
    var menu_out = false;

    // Works if menu is in OR out;
    $(".top_button").click(function () {
        menu_move();
    });
    $('#menu a').click(function () {
        menu_move();
    });
    // Only work if menu if out;
    $('#content').click(function () {
        if (menu_out == true) {
            menu_move();
        }
    });

    function menu_move() {
        if (menu_out) {
            $('#menu').animate({
                'margin-left': "-71%"
            }, 300, function () {
                menu_out = false;
            });
        } else {
            $('#menu').animate({
                'margin-left': "0"
            }, 300, function () {
                menu_out = true;
            });
        }
    }
});