JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<header id="header">

<div id="bbox" onclick="nav();"><div id="bap"><div id="burger"></div></div></div>
	
<div class="logo"><a href="21pinenuts.com">header</a></div>

</header>


<main>

<nav id="nav" class="nav">
<a href="index.php">Top</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
<a href="#">Contact</a>
</nav>

<article>  
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur nunc nunc, non efficitur nunc luctus sed. Fusce at turpis magna. In quis mi id risus molestie imperdiet quis sit amet libero. Morbi convallis tincidunt ex eget sollicitudin. Nunc rutrum sed leo volutpat ullamcorper. Nunc in diam congue, dictum ante ut, tempor nibh. Integer rutrum feugiat tortor eu luctus. Maecenas sodales est et lectus tincidunt fermentum. Maecenas in iaculis dolor. Nullam tincidunt est a commodo congue.</p>
<p>Aenean non dignissim magna. Ut posuere quis enim vel vestibulum. Ut vel magna feugiat, lacinia felis ac, semper sem. Nullam ultricies vestibulum dapibus. Cras lorem tortor, egestas vel nibh pulvinar, hendrerit gravida risus. Aliquam sed dui diam. Aenean scelerisque ante ac massa tincidunt consequat. Donec sollicitudin enim mauris, quis tristique neque dignissim at. Ut volutpat nunc vel erat euismod vehicula. In ut urna sed odio luctus sodales et vel justo. Nunc id odio orci. Etiam at leo magna. Integer maximus, libero ac tincidunt commodo, neque velit vehicula nisl, quis auctor massa augue at quam. Etiam placerat molestie leo, at porttitor nibh.</p>
<p>Donec nibh neque, sagittis id efficitur id, volutpat non erat. Nullam vel lectus lectus. Morbi malesuada eget neque quis dapibus. Sed pellentesque, massa eget aliquam scelerisque, eros libero mollis ligula, nec mollis purus augue ut orci. Morbi sit amet turpis efficitur, vehicula sapien nec, interdum est. Sed orci magna, faucibus non nunc eget, finibus porttitor libero. Curabitur mattis maximus risus, et iaculis purus tristique a.</p>
<p>Nam...

CSS

body {margin:0;padding:0;font-family:'Arial';overflow-x:hidden;background-color:#ffffff;text-decoration:none;}
#header {height:50px;background:#222222;position: fixed;top: 0;width: 100%;z-index:10;}	

#bbox {height:50px;width:50px;position:relative;cursor:pointer;float:right;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
#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;}

.nav {width:320px;position:relative;border:solid #dddddd;border-width:1px 0 0 0;}

.nav a {display:block;color:#222222;text-decoration:none;line-height:30px;padding:10px 10px 10px 20px;background:#ffffff;border:solid #dddddd;border-width:0 0 1px 0;}
.nav a:hover {background:#eeeeee;}



main {max-width:1160px;margin:90px auto;}


#nav {float:left;max-width:320px;}
article {float:right;max-width:820px;background-color:#ffffff;margin:auto;border:solid #dddddd;border-width:1px 0 0 0;}
#aside_main {float:left;clear:left;max-width:320px;background-color:#cccccc;}


/* Media Queries */  

@media screen and (max-width: 1160px) {
    
.nav {background:#222222;border:solid #dddddd;border-width:0 0 1px 1px;width:250px;position:absolute;right:-251px;top:50px;
-webkit-transition: right 0.5s;transition: right 0.5s;}

.nav a {display:block;color:#dddddd;text-decoration:none;line-height:30px;padding:10px 10px 10px 20px;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;}
.nav a:hover {background:#333333;}

.open {right:0px;-webkit-transition: right 0.5s;transition: right 0.5s;}

#nav {float:none;}
article {float:none;}
#aside_main {float:none;clear:none;max-width:820px;margin:auto;}
    
}


@media screen and (max-width: 480px) {
   ...

JavaScript

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

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

}