JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<div class="back">&lt;&lt; Main</div>
<nav id="mobile-nav-main" class="main"> 
    <a id="mobile-link-about-us" data-nav="mobile-nav-about-us">About Us</a>
    <a id="mobile-link-menu">Menu</a>
    <a id="mobile-link-locations">Locations</a>
    <a id="mobile-link-shack">Shack on Wheels</a>
    <a id="mobile-link-store">Online Store</a>
    <a id="mobile-link-faq">FAQ</a>
</nav>
<nav id="mobile-nav-about-us" class="nested">
    <a id="mobile-link-concept">The Concept</a>
    <a id="mobile-link-history">History</a>
    <a id="mobile-link-timeline">Timeline</a>
    <a id="mobile-link-memories">Memories</a>
</nav>

CSS

body {
    background-image: url(http://www.originaltommys.com/images/bg.jpg);
    background-attachment:cover;
}

nav {
    position : absolute;
    display  : block;
    width    : 300px;
}

nav.nested {
    left : -600px;
}
nav a {
    display          : block;
    height           : 50px;
    width            : 50%;
    background-color : yellow;
    border           : 1px solid #FFF;
    border-radius    : 5px;
    margin           : 5px;
    padding          : 10px;
    cursor           : pointer;
}
.back {
    display          : none;
    position         : absolute;
    width            : 50px;
    height           : 50px;
    background-color : yellow;
    border           : 1px solid #FFF;
    border-radius    : 5px;
    margin           : 5px;
    padding          : 10px;
    cursor           : pointer;
}

JavaScript

$('nav').on('click', 'a', function(e) {
    var $this = $(this);
    if ($this.data('nav')) {
        $this.parent().animate({
            left : '-=500'
        }, 200, function () {
            $('#' + $this.data('nav')).animate({
                left : '100px'
            }, 200, function () {
                $('.back').fadeIn('fast');
            });
        });
    } else {
        alert('Clicked link ' + $this.attr('id'));
    }
});
        
$('.back').on('click', function () {
    $(this).fadeOut('fast');
    $('nav.nested').animate({
        left : '-500px'
    }, 200, function () {
        $('nav.main').animate({
            left : 0
        }, 200);
    });
});