JSFiddle - React, Tailwind, and code Playground
HTML
<div id="left-menu">
<div id="navigation">
<ul class="top-level">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
<div id="right-side">
<div id="toolbar">
<button>Menu</button>
</div>
<h1>This is a test</h1>
</div>
CSS
body{overflow-x: scroll;font-family: sans-serif; max-width: 100%; height: 100%;}
#right-side{
background:#BFC7D8;;
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#left-menu
{
background:#323949;
left:0;
top:0;
height:100%;
width:250px;
position:absolute;
}
#navigation { font-size:20px; width:250px; padding-top:100px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level li > a {
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ccc;
text-indent: 20px;
}
#toolbar
{
width:100%;
height:50px;
background:#00F;
}
JavaScript
$(document).ready(function(){
$("button").click(function(){
var win = $("#right-side");
var position = win.position();
//alert( "left: " + position.left + ", top: " + position.top );
if(position.left < 100)
{
$("#right-side").animate({left:'250px'});
}else{
$("#right-side").animate({left:'0px'});
}
});
});