<div class="nav">
  <h1>Title</h1>
  <ul>
    <li><a class="active" href="#">Store</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
  </ul>
</div>

<div class="content">
  <div class="productsRow">
    <a class="navBut" href="#">&#9776;</a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  
  <div class="productsRow">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  
  <div class="productsRow">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  
  <div class="productsRow">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  
  <div class="productsRow">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
</div>

* {
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   list-style: none;
   font-family: helvetica neue, helvetica, arial, sans-serif;
}

body {
   background: #fafafa;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -ms-box-orient: horizontal;
   box-orient: horizontal;
}

.nav {
   width: 15%;
   background: #fafafa;
   overflow: hidden;
}

.nav h1 {
   font-weight: 300;
   font-size: 160%;
   color: #999;
   padding: 20px 0px 10px 10px; 
}

.nav ul li a {
   color: #999;
   font-size: 80%;
   display: block;
   padding: 5px 0px 5px 10px; 
   border-left: 5px solid transparent;
}

.nav ul li a:hover, .nav ul li a.active {
   border-left: 5px solid #5cb7d6; 
}

.content {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   background: #ddd;
   padding: 10px 0px 0px 10px;
   min-width: 400px;
   border-bottom-left-radius: 5px;
}

.content .productsRow {    
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -ms-box-orient: horizontal;
   box-orient: horizontal;
}

.content .productsRow a {
  -webkit-box-flex: 1; 
  -moz-box-flex: 1; 
  -ms-flex: 1;
  flex: 1;
  margin: 0px 10px 10px 0px;
  height: 200px;
  line-height: 200px;
  color: #fafafa;
  text-align: center;
  display: block;
  background: #5cb7d6;
}

// jQuery to open and close side navigation

$(function(){
  var nav = $('.nav'),
      navBut = $('.navBut');
  
  navBut.click(function(){
    if(nav.width() === 0){
      nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
    } else {
      nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
    }
  });
})