JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div class="mainCont">
    <div class="mainNav">
        <ul class="nav">
            <li id="home">Home</li>
            <li id="about">About</li>
            <li id="port">Portfolio</li>
        </ul>
    </div>
    <div class="bodyCont" id="p-about">
        <span>Here is some fancy info about my awesome graphic design!</span>
    </div>
    <div class="bodyCont" id="p-port">
        <span>I'm just another box of info man!</span>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mainCont {
    width: 516px;
    margin: 0 auto;
    position: relative;
}

.mainNav {
    width: 516px;
    height: 516px;
    background-image: url("http://farm9.staticflickr.com/8357/8413355900_c5cce4b825_o.jpg");
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    transition: right 1s ease;
    -webkit-transition: right 1s ease;
    -moz-transition: right 1s ease;
}

.mainNav.active {
    right: 100%;
}

ul.nav {
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
}

ul.nav li {
    width: 33.3%;
    float: left;
    text-align: center;
    line-height: 50px;
}

ul.nav li:hover {
    background: brown;
}

.bodyCont {
    display: none;
    background: tan;
    width: 100%;
    height: 516px;
    position: absolute;
    top: 0;
    left: 0;
}

.bodyCont.active {
    display: block;
}

JavaScript

$('ul.nav li').on('click', function() {
   var src = $(this).attr('id'); // This variable is grabbing the clicked elelemnts id to later be combined with a selector to make this flexible
    
    $('.mainNav').addClass('active');
    $('.bodyCont').removeClass('active');
    $('#p-' + src).addClass('active');
    
    $('#home').click(function(){
      $('.mainNav').removeClass('active');
    });
});