A CodePen by Sara Soueidan. SlideOut PanelMenu w/ Flexbox & jQuery - This is my version of the jPanelMenu, coded from scratch, and using Flexbox for layout. UPDATED: The side menu is a two-level accordion menu now.

index.html

<div class="container">
  <div class="side-panel">
    <div class="side-top"><h3>NAVIGATION</h3></div>
    <div class="acc">
      <ul>
        <li class="level-one"><a href="#">Nav Link One</a></li><ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>
        
        <li class="level-one"><a href="#">Nav Link Two</a></li>
        <ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>
        
        <li class="level-one"><a href="#">Nav Link Three</a></li>
        <ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>
         
        <li class="level-one"><a href="#">Nav Link Four</a></li>
        <ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>
        
        <li class="level-one"><a href="#">Nav Link Five</a>
        </li>
         <ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>
      </ul>
    </div>
  </div>
  <div class="main-content">
    <div class="top-bar">
      <div id="menu-icon"></div> 
      <h2><a href="http://twitter.com/SaraSoueidan" title="Follow me On Twitter">@SaraSoueidan</a></h2>
    </div>
    <div class="content">
      <div class="projects">
        <div class="wrapper"><img src="http://www.palantir.net/files/imagecache/inset_full/general/images/WF-sketch.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://blog.echoenduring.com/wp-content/uploads/2011/07/wireframing.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://visionwidget.com/images/2010-6/0609/web-design-ui-wireframe-ui-kit.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://webdesignledger.com/wp-content/uploads/2010/05/sketched_wireframes_15.jpg" height="100" width="100" /><p>Some Project</p></div>
        <div class="wrapper"><img src="http://c0660312.cdn.cloudfiles.rackspacecloud.com/iMockups%20Final.png" height="100" width="100" /><p>Some Project</p></div>
        <div class="clearfix"></div>
      </div>
      <div class="inner">
      <div class="left-content">
        <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p>
        <p>This is another dummy content paragraph.</p>
      </div>
        <div class="middle-content">
        <p>This is some dummy content. This is some dummy content. This is some dummy content.This is some dummy content.</p>
        <p>This is another dummy content paragraph.</p>
      </div>
      <div class="right-content">
        <p> Some other dummy text.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
      </div>
      </div>
    </div>
  </div>
</div>

script.js

$(document).ready(function(){
  var sidepanel  = $('.side-panel'),
      menuicon = $('#menu-icon');
  
  sidepanel.hide();
  
  menuicon.toggle(function(){
    sidepanel.show(200);
  }, function(){
    sidepanel.hide(200);
  });
  
 
  
});
/*Transitions on pseudo-elements are supported only in FF.
The transition that occurs when the side panel slides out is MUCH smoother in Chrome, and it is jumpy in FF.*/
 $('li.level-one').toggle(function(){
  $(this).next().slideDown();
  },function(){
  $(this).next().slideUp();
  });

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

html,body{height:100%;}
*{
  margin:0; 
  padding:0; 
  list-style-type:none;
  box-sizing:border-box;
}
a{
  color:#ddd; 
  text-decoration:none;
  outline:none;
}
::selection{
  color: #eee;
  background: #3FCBC9;
}
body{
  background: #4F6D87 /*url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/wp-content/themes/tweaker6/images/bgnoise.png') repeat*/;
  overflow-x:hidden;
  color:#333D4C;
  font: Normal 62.5%/1.1 "Open Sans", Helvetica;
}
.container{
  margin:30px 100px 500px;
  max-width:1000px; 
  min-height:800px; 
  box-shadow:2px 2px 5px 2px rgba(9,9,9,0.3);
  /*no need to float the divs as long as we're using display:box*/
  display:box;
  box-align:stretch;/*ensures equal heights*/
  
}
.side-panel{
  background:url('http://subtlepatterns.com/patterns/black_linen_v2.png') repeat;
  width:250px;
}
.side-top{
  color:#ddd; 
  height:50px;
  text-align:center;
  line-height:50px;
  border-bottom: 1px dashed #444;
}
.side-top h3{
text-shadow: 1px 1px #333D4C;
}
.main-content{
  background:url('http://subtlepatterns.com/patterns/whitey.png');
  min-height:400px;
  max-width:1000px;
  /*this will ensure that it will expand to fill the width of the parent container no matter how much the width of the side panel is*/
  box-flex:1;
  display:box;
  box-orient:vertical;
}
.top-bar{
  height:50px;
  background:url('http://subtlepatterns.com/patterns/black_linen_v2.png') repeat;
  padding:7px 10px;
  box-shadow: 0 2px 2px 1px rgba(9,9,9,0.3);
  border:1px solid #454545;
}
.top-bar h2 { 
  float:right;
  margin-right:20px;
  line-height:2em;
}
#menu-icon{
  cursor:pointer;
  color:#ddd; 
  background:#333;
  width:35px;
  height:35px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px; 
  position:relative;
  float:left;
}
/*the three lines nav-icon as a pseudo-element*/
#menu-icon:before {
    border-bottom: 10px double #E0E0E0;
    border-top: 3px solid #E0E0E0;    
    content:"";
    height: 5px; 
    position: absolute; 
    right:9px;  
    top: 8px; 
    width:16px;
}
.content{
  display:box;
  box-align:stretch;
  box-orient:vertical;
}
.projects{
  margin:40px 50px 10px 50px;
}
.clearfix{
  clear:both;
}
.inner{
  display:box; 
  box-align:stretch;
}
.left-content, .right-content, .middle-content{
  box-flex:1;
  max-width:500px;
  margin:50px 20px 50px;
  background:url('http://subtlepatterns.com/patterns/lined_paper.png');
  padding:15px;
  border:1px solid rgba(3,3,3,0.2);
  font-size:1.2em;
  line-height:1.25em;
  box-shadow:3px 3px 3px 1px rgba(6,6,6,0.2);
}

.wrapper{
  margin:10px 20px;
  width:120px; 
  height:140px;
  /*the projects have to be floated so that they wrap when the container width decreases, this would be possible if flex-wrap was supported, but unfortunately it's not*/
  float:left;
  border:5px solid white;
  border-radius:1px;
  position:relative;
  background:white;
  box-shadow:
   1px 1px 2px 1px rgba(40,40,40,0.5);
  z-index:0;
}
.wrapper:before, .wrapper:after{
  content:"";
  display:block;
  width:98%;
  height:98%;
  background:white;
  box-shadow:
    1px 1px 2px 1px rgba(40,40,40,0.5);
  position:absolute;
  border:5px solid white;
  border-radius:1px;
  transition: all 0.5s ease-out;
}
.wrapper:before{
  z-index:-5; 
  transform:rotate(-2deg);
  top:-5px;
  left:-10px;
}
.wrapper:after {
  z-index:-6;
  transform:rotate(3deg);
  top:0px;
  left:10px;
}
.wrapper:hover:before, .wrapper:hover:after{
    transform:rotate(0);
}
.wrapper:hover:before{top:-3px; left:0px;}
.wrapper:hover:after{top:-5px; left:0px;}
img{
  opacity:1;
  transition:opacity 0.5s ease;
}
.wrapper p {
  font:Bold 1.2em/2 "Open Sans";
}
.acc{ 
  margin-top:50px;
  width:100%;
  margin-bottom:100px;
}
.acc  ul  li {
  width:100%;
  height:40px;
  line-height:30px;
  font-size:1.7em;
  color:#ddd;
  padding:5px 30px;
  
}
.acc ul li a{ 
  display:block; 
  width:100%; 
  height:100%;
}
.acc > ul > li {
  border-bottom: 1px dashed #444;
}
.acc > ul > li:first-child{
  border-top:1px dashed #444;
}
.second-level {
  background: #333;
  display:none;
}
.second-level li{
border-bottom: 1px dashed #666;
}