JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sidebar">
<a href="#"><img src='http://placehold.it/75x50/000000/&text=Sports' alt="" border="none"/></a><br />
<a href="#"><img src='http://placehold.it/75x50/111111/&text=Athletes' alt="" border="none"/></a><br />
<a href="#"><img src='http://placehold.it/75x50/000000/&text=Venues' alt="" border="none"/></a><br />
<a href="#"><img src='http://placehold.it/75x50/111111/&text=About' alt="" border="none"/></a><br />
</div>
<div id="content"><a href="#">Show more links</a></div>
CSS
html body{
height:100%
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
#content{
height:1000px;
}
#sidebar {
display: none;
position:fixed;
left: 0;
top: 35%;
line-height: 0px;
border: none;
}
JavaScript
$(document).ready(
function() {
$("#content").click(function() {
$("#sidebar").toggle();
});
});