<link href='css/box-lid.css' rel='stylesheet'>
<link href='css/box-lid-nav.css' rel='stylesheet'>
<style>
.box-lid-menu button { position:absolute; top:70px; left:1px; opacity:0; }
.box-lid-menu button i { color:#fff; padding:5px; display:none; }
.box-lid-menu button:hover { opacity:0.1; }
.box-lid-menu nav { position:absolute; top:40px; }
.box-lid-menu nav h4 { font-size:x-large; margin-bottom:10px; }
.box-lid-menu li { margin:5px 0; list-style-type:none; }
.box-lid-menu nav li a { font-size:large; }
@media screen and (max-width:640px){
.box-lid-menu button { opacity:1; }
.box-lid-menu button i { display:block; }
}
</style>
<script src='js/jquery.box-lid.js'>
<div class='box-lid-menu'>
<button>
<i class="fa fa-bars">
</button>
<nav>
<h4>Projects
<ul>
<li>Documentation
<li>GitHub
<li>Jim Lim
</ul>
</nav>
</div>
<div class='box-lid'>
<div class='box-lid-content'>
<img class="img-responsive" src='css/images/how it could be.png'>
</div>
</div>