JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="nav_contain">
<nav id="nav" class="nav0">
<ul>
<li>Item 1</li>
<li><a href="#" onclick="reveal('i2');">Item 2</a>

<ul id="i2" class="out" onclick="reveal('i2');">
<li>Item a</li>
<li>Item b</li>
<li>Item c</li>
<li>Item d</li>
<li>Item e</li>
</ul>

</li>
<li>Item 3</li>
<li><a href="#" onclick="reveal('i4');">Item 4</a>

<ul id="i4" class="out" onclick="reveal('i4');">
<li><a href="#">Thing a</a></li>
<li>Thing b</li>
<li>Thing c</li>
<li>Thing d</li>
<li>Thing e</li>
</ul>

</li>
<li>Item 5</li>
</ul>
</nav>
</div>

CSS

body {margin:0;}

.nav_contain {width:100%;box-sizing: border-box;overflow:hidden;}

nav {position:relative;width:100%;box-sizing: border-box;}
.nav0 {left:0%;transition:left 0.5s ease;}
.nav1 {left:-100%;transition:left 0.5s ease;}

nav ul {list-style: none;margin: 0;padding: 20px;width:100%;background-color:yellow;box-sizing: border-box;}

nav ul li ul {background-color:#dedede;box-sizing: border-box;right:-100%;position:absolute;width:100%;top:0;}

.out {z-index:10;}

.in {z-index:999;}

.in::before {content:"<< back";cursor:pointer;}

JavaScript

function reveal(x) {
var nav = document.getElementById('nav');
if (nav.className == "nav0") {nav.className = "nav1";} else {nav.className = "nav0";}

var i = document.getElementById(x);
if (i.className == "in") {i.className = "out";} else {i.className = "in";}


}