JSFiddle - React, Tailwind, and code Playground

HTML

<div class="master">

	<a id="btn-nav">
		<span></span>
		<span>Menu</span>
		<span></span>
	</a>

	<nav id="main-nav">
		
			<div class="background">

		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
                <div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>
		  		<div class="slice"></div>

			</div>
			
	</nav>

</div><!-- end master -->

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);


body {
	background: #2980b9;
	font-family: 'Droid Sans', sans-serif;
}


#btn-nav {
	position:absolute;
	left:10px;
	top:10px;
	width:30px;
	height:30px;
	display:block;
  z-index:1;
}

#btn-nav:hover {
  cursor:pointer;
}

#btn-nav span:nth-child(2) {
	top:10px;
}

#btn-nav span:nth-child(3) {
	top:20px;
}

#btn-nav span {
	height: 4px;
	width: 30px;
	background: white;
	content: "";
	text-indent: -999em;
	display:inline-block;
	position:absolute;
	zoom: 1;
	top:0px;
	left:0px;
	text-align:center;
	-webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);
  -webkit-transform: rotate(0deg);
}


#btn-nav:hover > span, #btn-nav.open > span  {
	top:10px;
}

#btn-nav.open > span:nth-child(1) {
  -webkit-animation: rotateAni .2s .1s forwards, expandAni .3s .3s forwards;
}

#btn-nav.open > span:nth-child(2) {
  -webkit-animation: rotateAni .2s .1s forwards, expandAni-2 .3s .3s forwards;
}

#btn-nav.open > span:nth-child(3) {
  -webkit-animation: rotateAni .2s .1s forwards, expandAni-3 .3s .3s forwards;
}


@-webkit-keyframes rotateAni {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(90deg);}
}

@-webkit-keyframes expandAni {
  0% {left:0;}
  100% {left:-10px;}
}

@-webkit-keyframes expandAni-2 {
  0% {left:0;}
  100% {left:0px;}
}

@-webkit-keyframes expandAni-3 {
  0% {left:0;}
  100% {left:10px;}
}


#main-nav {
  position:fixed;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:100%;
  z-index:-1;
}


.slice {
  width:25%;
  height:30%;
  min-height:30%;
  float:left;
  background:black;
  opacity:0;
  -webkit-transition: 1s;
}

.background {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:-1;
}

JavaScript

(function () {
	'use strict';

	var menuBtn = document.getElementById('btn-nav');

    var slice = document.querySelectorAll('.slice');
    //var slideAdd = slice.cloneNode(true);

    var windowHeight = window.innerHeight;
    var background = document.getElementsByClassName('background')[0];

    menuBtn.addEventListener('click', function() {
    	
    	menuBtn.classList.add('open');

    		for(var i = 0; i < slice.length; i++){
    				slice[i].style.opacity = 1;
    			}

    		for(var i = document.getElementsByClassName('slice')[0].offsetHeight; i < background.offsetHeight; i++) {
    			
    			//console.log(i);
    			
    		}

    }, false);

}());