JSFiddle - React, Tailwind, and code Playground

by Joel Bennett

HTML

<div id="mainContainer">
    <ul id="mainMenu">
    <div class="btn-thirds group">
        <div class="col span_1_of_3"></div>
        <div class="col span_2_of_3">
        <h1>Take the tour !</h1>
        <li class="navButton plrdbg1" rel="#panelOne">Something Radical</li>
        <li class="navButton plrdbg2" rel="#panelTwo">Something Else Radical</li>
        <li class="navButton plrdbg3" rel="#panelThree">Something Mediocre</li>
        <li class="navButton plrdbg4" rel="#panelFour">Something Stupid</li>
        <li class="navButton plrdbg5" rel="#panelFive">Fuck this shit.</li>
        <!--- <li class="navButton plrdbg6" rel="#panelSix">The End</li> --->
        </div>
        <div class="col span_1_of_3"></div>
    </div>
    </ul>
    
<div class="slidingPanel" id="panelOne">
    <div class="btn-thirds group">
        <div class="col span_1_of_3"></div>			<!---left-gap-[aligns vertically (above) @ 480px]--->
        <div class="col span_2_of_3">			<!---content-box--->
            <div class="polaroid">
                <div class="pic"></div>
                    <div class="text-container"><p class="text">Radical!</p></div>
            </div>			<!---end-polaroid--->
        <div class="info-txt">Place your captions here.</div>
        </div>			<!---end-content-box--->
        <div class="col span_1_of_3"><div class="resetButton"></div></div>	<!---right-gap-[aligns below @ 480px]--->
    </div>			<!---end-group--->
</div>			<!---end-panel--->

    
    
    <div class="slidingPanel" id="panelTwo">
    <div class="btn-thirds group">
        <div class="col span_1_of_3"></div>
        <div class="col span_2_of_3">
            <div class="polaroid">
                <div class="pic"></div>
                    <div class="text-container"><p class="text">Cool!</p></div>
            </div>
        <div class="info-txt">Place your captions here.</div>
        </div>
        <div class="col span_1_of_3"><div class="resetButton"></div></div>
    </div>
</div>



   ...

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

/* Responsive Polaroid Photo Gallery - AJAX/CSS */

h1 {text-align:center;font-family:"Open Sans", sans-serif;font-size:35px;text-transform:lowercase;font-variant:small-caps;}
.btn-thirds {
	clear: both;
	padding: 0px;
	margin: 0px;
	}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 76.5%; }
.span_1_of_3 { width: 10%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}



/* AJAX menus/anims */

#mainContainer {
        width:100%;
        height:100vh;
        margin:0; padding:0;
        position:relative;
        overflow:hidden;
        background-color:#FFF;
    }
    #mainMenu {
        width:100%;
        height:100vh;
        position:absolute;
        background-color:#FFF;
		margin:0; padding:0;
        top:0;
        left:0;
		list-style-type: none;
    }
	
    #mainMenu li {
        width:90%;
        height:10vh;
        margin:15px;
        background-color:#ccc;
        position:relative;
        cursor:default;
		opacity:.6;
		overflow:hidden;
	  -moz-transition: all 0.2s ease-in;
	  -o-transition: all 0.2s ease-in;
	  -webkit-transition: all 0.2s ease-in;
	  transition: all 0.2s ease-in;
	  border-radius: 5px;
	  font-family:"Open Sans", sans-serif;
	  font-size:12vw;
	  line-height:none;
	  color:transparent;
	  text-align:center;
	  text-transform:lowercase;
	  font-variant:small-caps;
	box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.5);
   ...

JavaScript

//Heights based on viewport! View fullsize!
//media queries / images not included!
//VAR TO CONTAIN HASH TAG THAT WILL CHANGE
var rel = "";

//USED TO CHECK IF THE MENU IS UP OR NOT 
var menuUp = true;

//CLICK CALL FOR NAVE BUTTON, UPDATE REL VAR, UPDATE MENUUP BOOLEAN, CHANGE HASH TAG THAT FIRES ONHASHCHANGE METHOD, SCROLLTOP IS USED TO KEEP ALL ABSOLUTELY POSITION DIVS FROM BEING SCROLLED TO UPON CLICK EVENT
$('.navButton').click(function () {
    rel = $(this).attr('rel');
    menuUp = false;
    window.location.hash = rel;
    $('#mainContainer').scrollTop(0);
});

//SINGLE PAGE NAVIGATION REQUIRES A RESET BUTTON. RESET HASH AND RETURN MENUUP BOOLEAN TO TRUE, HASHCHANGE FIRES ONHASHCHANGE
$('.resetButton').click(function () {
    window.location.hash = "";
    menuUp = true;
});

//FIRED BY ONHASHCHANGE EVENT NAVIGATES YOU TO PROPER PANEL
function navigate() {
    $('#mainMenu').animate({
		opacity: 0,
        left: '100%'
    }, function () {
        $(rel).animate({
            top: '0px'
        });
    });
};

//FIRED BY ONHASHCHANGE EVENT RESETS MAIN MENU
function resetNav() {
    $(rel).animate({
        top: '110%'
    }, function () {
        $('#mainMenu').animate({
					opacity: 1,
            left: '0px'
        });
    });
};

//FIRED WHEN HASCHANGE OCCURS, LOGIC IS BASED ON MENUUP BOOLEAN THAT IS RESET UPON CLICK OR RESETBUTTON OR NAVBUTTON
window.onhashchange = function () {
    if (menuUp) {
        resetNav();
    } else {
        navigate();
    }
};