JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="nav"><a href="#" onclick="show()">Menu</a></div>
<div class="nav2" id="nav2"><div class="text">Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br>Some Text 1<br></div></div>
<div class="main">
Some Text 2
</div>CSS
body {margin:0;}
.nav {padding:10px;}
#nav2 {-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
background-color:#eee;overflow-y:scroll;transition:height 0.5s ease-out;z-index:-10;border:solid #000;border-width:1px 0;}
.nav2 {height:0px;}
.nav3 {height:400px;}
.text {padding:10px;}
.main {z-index:10;padding:10px;}JavaScript
function show() {
var panel = document.getElementById('nav2');
if (panel.className == "nav2") {
panel.className = "nav3";
}
else {panel.className = "nav2";}
}