JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/js/modernizr.custom.js"></script>
<div class="main clearfix">
    <nav id="menu" class="nav">
        <ul>
            <li>	<a href="#">
								<span class="icon">
									<i aria-hidden="true" class="icon-home"></i>
								</span>
								<span>Home</span>
							</a>

            </li>
            <li>	<a href="#">
								<span class="icon"> 
									<i aria-hidden="true" class="icon-services"></i>
								</span>
								<span>Services</span>
							</a>

            </li>
            <li>	<a href="#">
								<span class="icon">
									<i aria-hidden="true" class="icon-portfolio"></i>
								</span>
								<span>Portfolio</span>
							</a>

            </li>
            <li>	<a href="#">
								<span class="icon">
									<i aria-hidden="true" class="icon-blog"></i>
								</span>
								<span>Blog</span>
							</a>

            </li>
            <li>	<a href="#">
								<span class="icon">
									<i aria-hidden="true" class="icon-team"></i>
								</span>
								<span>The team</span>
							</a>

            </li>
            <li>	<a href="#">
								<span class="icon">
									<i aria-hidden="true" class="icon-contact"></i>
								</span>
								<span>Contact</span>
							</a>

            </li>
        </ul>
    </nav>
</div>

CSS

@font-face {
    font-family:'icomoon';
    src: url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.eot');
    src: url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.woff') format('woff'), url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.ttf') format('truetype'), url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:'icomoon';
        src: url('http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/fonts/icomoon.svg#icomoon') format('svg');
    }
    ;
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
    font-family:'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-team:before {
    content:"\e000";
}
.icon-blog:before {
    content:"\e001";
}
.icon-home:before {
    content:"\e002";
}
.icon-portfolio:before {
    content:"\e003";
}
.icon-services:before {
    content:"\e004";
}
.icon-contact:before {
    content:"\e005";
}
.icon-menu:before {
    content:"\f0c9";
}
a, li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Global CSS that are applied for all screen sizes */
 .nav ul {
    max-width: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.5em;
    font-weight: 300;
}
.nav li span {
    display: block;
}
.nav a {
    display: block;
    color: rgba(249, 249, 249, .9);
    text-decoration: none;
    -webkit-transition:...

JavaScript

//  The function to change the class
var changeClass = function (r, className1, className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if (regex.test(r.className)) {
        r.className = r.className.replace(regex, ' ' + className2 + ' ');
    } else {
        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"), ' ' + className1 + ' ');
    }
    return r.className;
};

//  Creating our button in JS for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin', '<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

//  Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function () {
    changeClass(this, 'navtoogle active', 'navtoogle');
}

// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function (e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

    if (buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}