A Pen by Jonathan Hudak.

index.html

<header id="topBar">
<a href="#menu" class="toggleMenu">&#9776;</a>
</header>
<nav id="menu">
      
      <a href="#">one</a>
      <a href="#">two</a>
      <a href="#">three</a>
      <a href="#">four</a>
      <a href="#">five</a>
</nav>

<div class="project container">
  <div class="project-panel">
    <h1>Project Title</h1>
    <button class="toggleProject">+</button>
  </div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
  <div class="panel" style="background-image: url(http://www.snapcanon.com/wp-content/uploads/2014/01/bryce_canyon_sunrise_by_metagore-d3j5czx.jpg)"></div>
</div>

sbotw.markdown

sbotw

A Pen by Jonathan Hudak on CodePen.

License.

script.js

$('.project-panel').on('click', function() {
   $(this).parent().toggleClass('active');
});

style.scss

$panelSize : 31.2%;

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
a {
  color: tomato;
}
.toggleMenu {
  text-decoration: none;
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 999;
  display: block;
}
#topBar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  padding: 1rem;
  text-align: center;
  //background: darken(gold, 10%);
 
}
.container {

  padding-left: $panelSize;
  white-space: no-wrap;
  height: inherit;
  white-space:nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  font-size: 0;

}

.panel {
  position: relative;
  width: 80vw;
  height: 0;
  margin-top: 5vh;
  max-height: 80vh;
  overflow:hidden;
  padding-bottom: 100%;
  background: #ddd;
  display: inline-block;
  margin-right: 7vw;
  background-size: cover;
  background-repeat: no-repeat;

  * {
    font-size: 1rem;
  }

  
}

#menu {
  position: fixed;
  max-height: 0;
  overflow: hidden;
  background: white;
  padding-top: 0;
  width: 100%;
  top: 3.25rem;
  transition: all .5s ease;
  &.active {
    padding: 1.5rem 0 3rem;
    max-height: 1024px;
    
  }
  a {
    display: block;
    padding: 1rem;
  }
}


.project-panel {
  position: absolute;
  z-index: 10;
  
  right: 0;
  padding: 10vh 0;
  text-align: center;
  bottom: 0;
  width: 31.2%;
  background: rgba(white, .8);
  font-size: 1rem;
  height: 100%;
  background-size: cover;
  transition: 3s linear;
   
}



.active .project-panel {
   //animation: slidePanel  3s linear;
   animation: slidePanel 1s linear;
   animation-fill-mode: forwards; 
   animation-direction: alternate;

}




.active .panel {
    background: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    margin-top: 0;
}

.active .project-panel {
  right: 0;
  left: auto;
  
}


@keyframes slidePanel {
  50% {
    width: 100%;
  }
  
  100% {
    width: $panelSize;
    left: 0;
  }
  
}