JSFiddle - React, Tailwind, and code Playground

by Paul Kutakov

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<a href="#menu" id="menuLink" class="menu-link">
    <span></span>
</a>
<div id="menu">
    <div class="pure-menu pure-menu-open">
        <a href="#" class="pure-menu-heading">THE MENU</a>
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li class="pure-menu-selected"><a href="#">Menu selected</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 1</a></li>
            <li class="menu-item-divided"><a href="#">divided</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Open submenu</a>
                <ul>
                <li><a href="#">submenu1</a></li>
            </ul></li>
        </ul>
    </div>
</div>

CSS

a {
    text-decoration:none;
}
#menu.active{
    left:260px;
}
.menu-link.active {
    left: 260px;
}

#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

    .menu-link {
        position: fixed;
        display: block; /* show this only on small screens */
        top: 0;
        left: 0; /* "#menu width" */
        background: #000;
        background: rgba(0,0,0,0.7);
        font-size: 11px; /* change this value to increase/decrease button size */
        z-index: 10;
        width: 4em;
        height: 4em;
        padding: 1em;
    }

        .menu-link:hover,
        .menu-link:focus {
            background: #000;
        }

        .menu-link span {
            position: relative;
            display: block;
            margin-top: 0.9em;
        }

        .menu-link span,
        .menu-link span:before,
        .menu-link span:after {
            background-color: #fff;
            width: 100%;
            height: .2em;
            -webkit-transition: all 0.4s;
               -moz-transition: all 0.4s;
                -ms-transition: all 0.4s;
                 -o-transition: all 0.4s;
                    transition: all 0.4s;
        }

            .menu-link span:before,
            .menu-link span:after {
                position: absolute;
                top: -.55em;
                content: " ";
            }

            .menu-link span:after {
                top: .55em;
            }

        .menu-link.active span {
            background: transparent;
        }

            .menu-link.active span:before {
                -webkit-transform: rotate(45deg) translate(.5em, .4em);
                   -moz-transform: rotate(45deg) translate(.5em, .4em);
                   ...

JavaScript

$(function (){
    $(".menu-link").click(function (){
        $("#menu").toggleClass("active");
        $(".menu-link").toggleClass("active");
    });
});