$(window).on('load resize', function(){
$('.box-lid-menu').boxLid();
});
          

<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>