JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/mlpushmenu.js"></script>
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"></script>
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"></script>

		<div class="container">
			<!-- Push Wrapper -->
			<div class="mp-pusher" id="mp-pusher">

				<!-- mp-menu -->
				<nav id="mp-menu" class="mp-menu">
					<div class="mp-level">
						<h2 class="icon icon-world">All Categories</h2>
						<ul>
							<li class="icon icon-arrow-left">
								<a class="icon icon-display" href="#">Devices</a>
								<div class="mp-level">
									<h2 class="icon icon-display">Devices</h2>
									<ul>
										<li class="icon icon-arrow-left">
											<a class="icon icon-phone" href="#">Mobile Phones</a>
											<div class="mp-level">
												<h2>Mobile Phones</h2>
												<ul>
													<li><a href="#">Super Smart Phone</a></li>
													<li><a href="#">Thin Magic Mobile</a></li>
													<li><a href="#">Performance Crusher</a></li>
													<li><a href="#">Futuristic Experience</a></li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
							</li>
							<li><a class="icon icon-photo" href="#">Collections</a></li>
							<li><a class="icon icon-wallet" href="#">Credits</a></li>
						</ul>
					</div>
				</nav>
				<!-- /mp-menu -->

				<div class="scroller">
					<div class="scroller-inner">
						<!-- контент -->
                        <!-- /контент -->
                        <a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a>
					</div><!-- /scroller-inner -->
				</div><!-- /scroller -->

			</div><!-- /pusher -->
		</div><!-- /container -->

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

body {
	background: #34495e;
	color: #fff;
	font-weight: 300;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}

a {
	text-decoration: none;
	color: #f7f7f7;
	outline: none;
}

a:hover, a:focus {
	color: #fff;
	outline: none;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}

.clearfix:after {
	clear: both;
}

.codrops-header,
.codrops-top {
	font-family: 'Lato', Arial, sans-serif;
}

.codrops-header {
	margin: 0 auto;
	padding: 2em;
	background: rgba(0,0,0,0.01);
	text-align: center;
}

.codrops-header h1 {
	margin: 0;
	font-weight: 300;
	font-size: 2.625em;
	line-height: 1.3;
}

.codrops-header span {
	display: block;
	padding: 0 0 0.6em 0.1em;
	font-size: 60%;
	opacity: 0.7;
}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	background: #91cfa1;
	background: rgba(255, 255, 255, 0.1);
	text-transform: uppercase;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	display: inline-block;
	padding: 0 1em;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.1em;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.95);
	color: #333;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	display: block;
	float: left;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak:...

JavaScript

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );