JSFiddle - React, Tailwind, and code Playground

by smnh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="menuOpenButton"><i class="fa fa-bars"></i> Menu</div>
<div id="menu">
    <div id="menuCloseButton"><i class="fa fa-times"></i> Close</div>
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
        <li>Menu Item 4</li>
    </ul>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial, san-serif;
    font-weight: 300;
}
#menuOpenButton {
    float: left;
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f5f5f5;
}
#menu {
    position: fixed;
    z-index: 10;
    width: 200px;
    height: 100%;
    background-color: #000000;
    transform-origin: 0% 0%;
    transition-property: transform opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    opacity: 0;
    transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}
#menu.opened {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu ul li {
    color: #cccccc;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #212121;
}
#menuCloseButton {
    position: absolute;
    top: 0;
    left: 100%;
    padding: 0 20px;
    background-color: rgba(26, 26, 26, 0.9);
    line-height: 60px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

JavaScript

var menu = document.getElementById("menu");
var menuOpenButton = document.getElementById("menuOpenButton");
var menuCloseButton = document.getElementById("menuCloseButton");
var menuOpenedClassName = "opened";

menuOpenButton.addEventListener("click", function(event) {
    menu.className += " " + menuOpenedClassName;
}, false);

menuCloseButton.addEventListener("click", function(event) {
    menu.className = menu.className.replace(menuOpenedClassName, "");
}, false);