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 class="logo"></div>


</div>

<nav id="nav" class="nav">
<a href="#">Home</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="#">Contact</a>
</nav>


<div class="container">

</div>

CSS

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

#header {height:50px;background:#222222;}

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

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

.open {right:0px;-webkit-transition: all 0.5s;transition: all 0.5s;}
  
#bbox {height:50px;width:50px;position:relative;cursor:pointer;float:right;}
#bap {width:30px;background-color:#dddddd;padding:6px 0;position:absolute;top:10px;right:10px;}
#burger {height:6px;border:solid #222222;border-width:6px 0;}

JavaScript

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

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

}