JSFiddle - React, Tailwind, and code Playground

by ankitjc

HTML

<div id="header"></div>
<div id="leftNav" class="leftNavigation">
    <div class="marginTop marginBottom leftNavBox leftNavSelected" tabindex="0">Lotus</div>
    <div class="leftNavBox marginBottom">Orchid</div>
    <div class="leftNavBox marginBottom">Rose</div>
    <div class="leftNavBox marginBottom">Tulip</div>
</div>
<div id="rightNav" class="leftNavigation">
    <div id="lotus">
        <div id="lotusHeading">THIS IS LOTUS PAGE</div>
        <img src="http://www.linas-crochet.com/images/lotus-1.jpg" />
        <img src="http://www.linas-crochet.com/images/lotus-2.jpg" />
        <img src="http://www.linas-crochet.com/images/lotus-1.jpg" />
        <img src="http://www.linas-crochet.com/images/lotus-2.jpg" />
        <img src="http://www.linas-crochet.com/images/lotus-1.jpg" />
        <img src="http://www.linas-crochet.com/images/lotus-2.jpg" />
    </div>
    <div id="orchid" hidden>
        <div id="orchidHeading">THIS IS ORCHID PAGE</div>
        <img src="http://www.linas-crochet.com/images/orchid-1.jpg" />
        <img src="http://www.linas-crochet.com/images/orchid-2.jpg" />
        <img src="http://www.linas-crochet.com/images/orchid-1.jpg" />
        <img src="http://www.linas-crochet.com/images/orchid-2.jpg" />
        <img src="http://www.linas-crochet.com/images/orchid-1.jpg" />
        <img src="http://www.linas-crochet.com/images/orchid-2.jpg" />
    </div>
    <div id="rose" hidden>
        <div id="roseHeading">THIS IS ROSE PAGE</div>
        <img src="http://www.linas-crochet.com/images/rose-1.jpg" />
        <img src="http://www.linas-crochet.com/images/rose-2.jpg" />
        <img src="http://www.linas-crochet.com/images/rose-1.jpg" />
        <img src="http://www.linas-crochet.com/images/rose-2.jpg" />
        <img src="http://www.linas-crochet.com/images/rose-1.jpg" />
        <img src="http://www.linas-crochet.com/images/rose-2.jpg" />
    </div>
    <div id="tulip" hidden>
        <div id="roseHeading">THIS IS TULIP PAGE</div>
       ...

CSS

#header {
    background: #FFCC00;
    /*#8F0E00*/
    height: 50px;
}
#leftNav {
    background: #CCC;
    /*#201C18*/
    float: left;
    width: 25%;
    height: 100%;
    min-height: 400px;
}

.leftNavBox {
    text-align: center;
    vertical-align: middle;
    width: 50%;
    margin: 0 auto;
    background: #bbb;
    /*#3B352F*/
    padding: 5px;
    height: 30px;
    /*TODO*/
    line-height: 30px;
    /*keeps the text centerd*/
}

.leftNavSelected {
    background: #aaa;
    color: #eee;
}
.marginTop {
    margin-top: 50px;
}
.marginBottom {
    margin-bottom: 20px;
}
#rightNav {
    background: #EEE;
    /*#3B352F*/
    height: 100%;
    min-height: 400px;
}
#lotusHeading {
    padding: 10px 0px 0px 15px;
}
img {
    width: 125px;
    height: 125px;
    padding: 15px;
    display:inline-block;
}

JavaScript

if($.contains( $('.leftNavigation'), $(':focus')) // left col has focus
else if($.contains( $('.rightNavigation'), $(':focus')) // right col has focus

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
            alert('do nothing');
        break;

        case 38: // up
            alert('go up');
            ('#lotus').blue();
        break;

        case 39: // right
            $('.leftNavigation').blur();
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});