JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<div class="mobilenav"> <span>
  <div class="box">
    <div class="lines"></div>
  </div>
  </span>
  <ul class="navigation">
    <li class="home current  first "> <a href="#" > <span>Home</span> </a> </li>
    <li class="about"> <a href="#" > <span>About</span> </a> </li>
    <li class="products"> <a href="#" > <span>Products</span> </a> </li>
    <li class="careers"> <a href="#" > <span>Careers</span> </a> </li>
    <li class="events"> <a href="#" > <span>Events</span> </a> </li>
    <li class="contact last "> <a href="#" > <span>Contact Us</span> </a> </li>
  </ul>
  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>test</p>
</div>

CSS

/* Button */
.lines { 
    border-bottom: 17px double black; 
    border-top: 6px solid black; 
    content:"";
    height: 5px; 
    width:30px;
    float:left
}
.box {
  border: 1px solid black;
  width:40px;
  height:40px;
  padding:12px 0px 0px 10px;
  border-radius:10px;
  background-color:gray;
  float:left;
  display:block;
}

/* Menu styling */
.mobilenav ul.navigation {
  margin:0px;
  padding-top:70px;
}
.mobilenav ul li {
  list-style:none;
}
.mobilenav a:link, .mobilenav a:visited, .mobilenav a:active {
	color: white;
	text-decoration: none;
}
.mobilenav a:hover {
	color: red;
	text-decoration: none;
}
.mobilenav {
	display: block;
	float: left;
	margin-top: 3px;
	margin-right: 3px;
	width: 100%;
	text-align: left;
	font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-weight: bolder;
}
.mobilenav ul li {
	width: 100%;
}
.mobilenav ul li.home a {
	display: block;
	height: 30px;
	width: 90%;
	margin-bottom: 12px;
	text-align: left;
	margin-left: 2%;
	padding-top: 10px;
	padding-bottom: 6px;
	text-shadow: 0px 0px 6px #000, 0px 0px 6px #000, 0px 0px 6px #000;
	padding-left: 15px;
	font-size: 1.7em;
}
ul.navigation {
  width:200px;
  background:#CCCCCC;
}
.mobilenav ul li.products a {
		display: block;
	height: 30px;
	width: 90%;
	margin-bottom: 12px;
	text-align: left;
	margin-left: 2%;
	padding-top: 10px;
	padding-bottom: 6px;
	text-shadow: 0px 0px 6px #000, 0px 0px 6px #000, 0px 0px 6px #000;
	padding-left: 15px;
	font-size: 1.7em;
}
.mobilenav ul li.careers a {
		display: block;
	height: 30px;
	width: 90%;
	margin-bottom: 12px;
	text-align: left;
	margin-left: 2%;
	padding-top: 10px;
	padding-bottom: 6px;
	text-shadow: 0px 0px 6px #000, 0px 0px 6px #000, 0px 0px 6px #000;
	padding-left: 15px;
	font-size: 1.7em;
}
.mobilenav ul li.about a {
	display: block;
	height: 30px;
	width: 90%;
	margin-bottom: 12px;
	text-align: left;
	margin-left: 2%;
	padding-top: 10px;
	padding-bottom:...

JavaScript

$(document).ready(function(){  
  $('.navigation').hide();  
  $('.box').click(function(){  
    $('.navigation').toggle();  
  });  
  });
  $(document).scroll(function(){
    $('.navigation').hide();
  })