JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="header">

<div id="bbox" onclick="nav();"><div id="bap"><div id="burger"></div></div></div>


</div>

<nav id="nav" class="nav">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">This item is very long and goes onto the next line</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
<a href="#">Item 6</a>
</nav>


<div class="container">

</div>

CSS

body {margin:0;padding:0;font-family:arial;}

#header {height:40px;border:solid #dddddd;border-width:0 0 1px 0;background:#ffffff;}

.nav {background:#ffffff;border:solid #dddddd;border-width:0 1px 1px 0;width:310px;position:absolute;top:41px;left:-311px;-webkit-transition: all 0.5s;transition: all 0.5s;}

.nav a {display:block;color:#aaaaaa;text-decoration:none;line-height:20px;padding:10px;}
.nav a:hover {background:#F9F9F9;}

.open {left:0px;-webkit-transition: all 0.5s;transition: all 0.5s;}
  
#bbox {height:40px;width:40px;position:relative;cursor:pointer;}
#bap {width:20px;background-color:#bbbbbb;padding:4px 0;position:absolute;top:10px;left:10px;}
#burger {height:4px;border:solid #ffffff;border-width:4px 0;}

JavaScript

function nav() {
var el = document.getElementById("nav");

if (el.className == "nav") {
el.className = "nav open";
}
else {el.className = "nav";}

}