JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div id="mobile_menu">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Services</a>

        </li>
        <li><a href="#">Employment</a>

        </li>
        <li><a href="#">Contract Vehicles</a>

        </li>
        <li><a href="#">About Us</a>

        </li>
        <li><a href="#">Office Locations</a>

        </li>
    </ul>
</div>
<div id="mobile_right">
    <div id="mobile_menubar">
        <div id="mobile_button">Menu</div>
    </div>
    <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>    <p>no.</p>    <p>no.</p>    <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>
        <p>no.</p>    <p>no.</p>
        <p>no.</p>    <p>no.</p>
</div>

CSS

#mobile_menubar {
    width:40px;
    background-color:rgb(70, 100, 146);
    color: #fff;
    padding: 10px;
}
#mobile_button {
    cursor:pointer;
}
#mobile_menu, #mobile_right {
    display:inline;
}
#mobile_menu li a {
    padding: 10px;
    display: block;
    color: white;
    text-decoration: none;
}
#mobile_right {
    width:100%;
    background-color: #fff;
    z-index: 5;
    position: fixed;
    left: 0px;
    height: 100%;
    -webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#mobile_right p {
    padding: 10px;
}
#mobile_menu {
    float:left;
    width: 250px;
    height: 100%;
}
#mobile_menu li {
    background-color:rgb(50, 70, 106);
    border-bottom: 1px solid #888;
}
#mobile_menu ul {
    padding: 0px;
    margin: 0px;
}

JavaScript

$('#mobile_button').click(function () {
    var iteration = $(this).data('iteration') || 1;
    switch (iteration) {
        case 1:
            $('#mobile_right').animate({
                left: 160
            }, 'slow', function () {
                $('#mobile_button').html('Close');
            });
            break;

        case 2:
            $('#mobile_right').animate({
                left: 0
            }, 'slow', function () {
                $('#mobile_button').html('Menu');
            });
            break;
    }
    iteration++;
    if (iteration > 2) iteration = 1;
    $(this).data('iteration', iteration);
});