JSFiddle - React, Tailwind, and code Playground

HTML

<title>olo - Home</title>

  
  <script src="js/apps.js"></script>
  <script src="js/controllers.js"></script> 
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    

</head>
<body>

<div class="shy-menu">
  <a class="shy-menu-hamburger">
    <span class="layer top"></span>
    <span class="layer mid"></span>
    <span class="layer btm"></span>
    </a>
  <div class="shy-menu-panel">
    <ul>
      <li><a href="index.html">Home</a></li>
	  <br/>
      <li><a href="#">About</a></li>
      <br/>
	  <li><a href="#">Contact</a></li>
      <br/>
	  <li><a href="#">Rate/Review</a></li>
    </ul>
  </div>
</div>

<div class="menu open">
  <a class="hamburger">
    <span class="layer top"></span>
    <span class="layer mid"></span>
    <span class="layer btm"></span>
  </a>
</div>


 <div id="wrapper" >

		
	<div id="nav">
		<ul>
			<li class="active"><a href="index.html">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Rate/Review</a></li>
		</ul>
	</div>
	
	<h1 class="centerSay">... find something ...</h1>

	<div class="searching" ng-view>
	</div>
	
	<footer>
		
		
			<p>Connect with us</p>
			
		
	</footer>
	</div>

</body>

CSS

body{	
	background:#a9aea8;
	font-family:Century Gothic, sans-serif;
	font-size: 18px;
}

h1, h2, h3{
	text-align:center;
	color: #666;

}
p{
	font-size:12px;
}

img{
	border:none;
	text-align:center;
	max-width:100%;
	height:auto;
	width:auto;
}

#wrapper{
	margin: 0 auto;
	max-width: 1120px;
	width: 98%;
	background: #d3e1cf;
	border: .5px solid rgba(12, 3, 25, 0.8);
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(12, 3, 25, 0.8);
}

ul {
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0;
}

* {
  -moz-transition: all .1s cubic-bezier(.1,.7,.3,1);
  -webkit-transition: all .1s cubic-bezier(.1,.7,.3,1);
  -o-transition: all .1s cubic-bezier(.1,.7,.3,1);
  -ms-transition: all .1s cubic-bezier(.1,.7,.3,1);
  transition: all .1s cubic-bezier(.1,.7,.3,1);
}

.shy-menu { 
  visibility:hidden;
  position: absolute;
  margin:0;
  padding:0;
  display: block;
  height: 35px;
  width: 35px;
  background-color: rgba(33,40,44,.1);
  color: #fff;
}
.shy-menu.is-open,
.shy-menu:hover { 
  z-index:20;
  background-color: rgba(33,40,44,1);
}

.shy-menu.is-open {
  height: 40%;
  width: 200px;
}

.shy-menu-panel { 
  margin-left: -250px;
}
.is-open .shy-menu-panel { 
  margin-left: 0;
}

.is-open .shy-menu-panel ul li a{
	color:white;
	display:block;
	margin-left:0;
	font-weight: 900;
	text-decoration:none;
}

.shy-menu-hamburger {
  position: relative;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.shy-menu-hamburger  .layer {
  background-color: #fff;
  border-radius: 1px;
  display: block;
  height: 2px;
  overflow: hidden;
  position: absolute;
    left: 5px;
  width: 18px;
}

.shy-menu-hamburger .layer.top { top: 9px; }
.is-open .shy-menu-hamburger .layer.top { 
  top: 17px;
  left: 5px;
  transform: rotate(45deg);
}
.shy-menu-hamburger .layer.mid { top: 16px; }
.is-open .shy-menu-hamburger .layer.mid {
  opacity: 0;
  left: 0;
}
.shy-menu-hamburger .layer.btm { top: 23px; }
.is-open .shy-menu-hamburger...

JavaScript

$(function() {
	
	initDropDowns($("div.shy-menu"));

});

function initDropDowns(allMenus) {

	allMenus.children(".shy-menu-hamburger").on("click", function() {
		
		var thisTrigger = jQuery(this),
			thisMenu = thisTrigger.parent(),
			thisPanel = thisTrigger.next();

		if (thisMenu.hasClass("is-open")) {

      		thisMenu.removeClass("is-open");
			
      		jQuery(document).off("click");                                 
      		thisPanel.off("click");

		} else {			
			
    		allMenus.removeClass("is-open");	
			thisMenu.addClass("is-open");
	
			jQuery(document).on("click", function() {
				allMenus.removeClass("is-open");
			});
			thisPanel.on("click", function(e) {
				e.stopPropagation();
			});
		}
		
		return false;
	});
}