JSFiddle - React, Tailwind, and code Playground

by langbert

HTML

<div id="siteNavOverlay"></div>
<nav class="siteNav">
    <ul>
        <li><a href="#">navigation item 1</a></li>
        <li><a href="#">navigation item 2</a></li>
        <li><a href="#">navigation item 3</a></li>
        <li><a href="#">navigation item etc.</a></li>
    </ul>
</nav>
<div class="content">
    <div id="openSiteNav"></div>
    <p>Bacon ipsum dolor sit amet tail chicken fatback pork chop, ribeye spare ribs beef ribs meatball tenderloin. Salami doner jerky short loin porchetta. Chuck shoulder pancetta ground round, doner cow hamburger pork venison t-bone shank sirloin tongue short ribs. Short ribs beef ribs venison pig.</p>
    <p>Chuck pork chop salami pig short loin venison tail pork belly doner pancetta leberkas spare ribs. Kevin rump t-bone swine. Salami ground round tri-tip turkey, frankfurter doner swine jerky tail biltong shoulder drumstick beef ribs corned beef pork loin. Bacon shankle rump jerky. Cow shankle turducken flank landjaeger sausage rump shank ground round bresaola. Andouille jowl turkey, rump bacon biltong short ribs kevin.</p>
    <p>Spare ribs ball tip drumstick, brisket filet mignon ground round landjaeger tail tenderloin salami. Shankle leberkas turkey landjaeger sausage strip steak boudin. Bacon tri-tip meatloaf ground round turducken doner landjaeger spare ribs kevin ham. Ham bacon sausage, flank ribeye frankfurter salami turkey t-bone chuck. Turducken short loin ground round shoulder beef venison ribeye bresaola pastrami.</p>
    <p>Frankfurter venison strip steak, doner rump chicken jowl meatball tenderloin. Spare ribs beef ribs beef meatball prosciutto andouille, leberkas pork belly. Pork chop bresaola ham hock meatloaf filet mignon, doner sirloin flank tenderloin beef ribs. Kevin sirloin porchetta pancetta pork.</p>
    <p>Doner chicken tri-tip brisket, short ribs kevin tail kielbasa jerky pork chop salami. Turducken frankfurter leberkas, sausage biltong rump hamburger tri-tip pork cow salami. Cow capicola pancetta...

CSS

html {
    height: 100%;
    background: whitesmoke;
}
body {
    position: relative;
    margin: 0;
    height: 100%;
    background: whitesmoke;
    opacity: 1;
}
.content {
    position: relative;
    padding: 25px 50px;
    width: 100%;
    min-height: 100%;
    background: #f0f0f0;
    z-index: 10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition: -moz-transform 0.2s ease;
    -o-transition: -o-transform 0.2s ease;
    transition: transform 0.2s ease;
}
p { margin: 0 0 1em; }
#openSiteNav {
    position: absolute;
    left: 10px;
    top: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 100;
    background: url('http://icons.iconarchive.com/icons/pixelkit/tasty-bites/64/hamburger-icon.png') no-repeat center transparent;
    background-size: contain;
}
#siteNavOverlay {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 801;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
    -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
    -o-transition: opacity 0.2s ease, -o-transform 0.2s ease;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.siteNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}


.siteNavOpen body {
    overflow: hidden;
}
.siteNavOpen .content {
    -webkit-transform: translate3d(280px, 0, 0);
    -moz-transform: translate3d(280px, 0, 0);
    -ms-transform: translate3d(280px, 0, 0);
    -o-transform: translate3d(280px, 0, 0);
    transform:...

JavaScript

var $HTML = $('html');
var $siteNavOverlay = $('#siteNavOverlay');
var transition, transitionEnd;
var fakeElement = document.createElement('fakeelement');
var browserTransitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
};
for (var transition in browserTransitions) {
    if (fakeElement.style[transition] !== undefined) {
        transitionEnd = browserTransitions[transition];
    }
}
$('#openSiteNav').click(function() {
	$HTML.addClass('siteNavTransition');
	$HTML.addClass('siteNavOpen');
});
$siteNavOverlay.click(function() {
	$siteNavOverlay.on(transitionEnd, function() {
		$siteNavOverlay.off(transitionEnd);
		$HTML.removeClass('siteNavTransition');
	});
	$HTML.removeClass('siteNavOpen');
	// hAcKiSh FiX: timeout for no transition end
	setTimeout(function() {
		$siteNavOverlay.off(transitionEnd);
		$HTML.removeClass('siteNavTransition');
	}, 300);
});