A CodePen by Sara Soueidan. Fold-Up Mobile Menu Concept - For best effect view it in Chrome.

index.html

<div class="wrapper"> 
  
  <div class="container">
    <h2>Fold-Up Mobile Menu</h2>
    <p> Best viewed in Chrome</p>
    <div class="background">
      <figure>
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/img1.jpg" width="170" height="100" />
        </div><!--end imh wrapper-->
        <figcaption>Winter Photos</figcaption>
      </figure>
      
      <figure>
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/img2.jpg" width="170" height="100" />
        </div><!--end imh wrapper-->
        <figcaption>On The Beach</figcaption>
      </figure>
      
       <!--<figure>
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/img3.jpg" width="170" height="100" />
        </div>
        <figcaption>Birds</figcaption>
      </figure>
      
      <figure>
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/img4.jpg" width="170" height="100" />
        </div>
        <figcaption>Ocean Photography</figcaption>
      </figure> -->
      
      <figure>
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/eiffel.jpg" width="170" height="100" />
        </div><!--end imh wrapper-->
        <figcaption>Weekend in Paris</figcaption>
      </figure>
      
      <figure>
        
        <div class="img-wrapper">
        <img src="http://sarasoueidan.com/RESOURCES/paris.jpg" width="170" height="100" />
        </div><!--end imh wrapper-->
        <figcaption>Weekend in Rome</figcaption>
      </figure>
      <div class="nav">
        <span class="icon-home"></span>
        <span class="icon-cloud"></span>
        <span class="icon-comment-alt"></span>
        <span class="icon-link"></span>
        <span class="icon-briefcase"></span>
        
      </div>
      <div class="nav-cover">
        <a href="http://twitter.com/SaraSoueidan">@SaraSoueidan</a> 
        <span class="menu-icon"><img src="http://sarasoueidan.com/RESOURCES/click_here.png" /></span>
      </div><!--end nav cover-->

      <div class="clear"></div>
    </div><!--end background-->
  </div><!--end container-->
 
</div>

script.js

(function(){
      $('.menu-icon').on('click', function(){
       $('.nav-cover').toggleClass('open');
       $('.menu-icon img').addClass('hidden');
      });
  })();

/*

VIEW IN FULL MODE FOR BEST VIEW 

Credits and Disclaimer:
==================================================

Designed by Dribbbler Stephane Bouget. 

Original shot: http://dribbble.com/shots/394407-Iphone-Menu-Concept-animated-gif

The whole concept idea is Stephane's not mine. I just coded it because I loved it.


*/

style.css

*{box-sizing:border-box;}
body{
  background:black url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/use_your_illusion.png');
  font-family: "helvetica";
}
a{color:#9A9B9D; text-decoration:none;}
h2{
  margin: 10px 30px;
  font-size:2.7em;
  color: #d29646;
  text-shadow: 1px 1px rgba(255,255,255,0.4), 0 -1px rgba(88, 32, 2, 0.7);
}
p{
  text-align:Center;
  color: #a26616;
  text-shadow: 1px 1px rgba(255,255,255,0.4), 0 -1px rgba(88, 32, 2, 0.7);
  
}
.wrapper{
  width:600px; 
  height:1000px;
  margin:20px auto; 
  
  position:relative;
}
.container{ 
  width:500px;
  padding-bottom:80px;
  background: url('http://subtlepatterns.com/patterns/purty_wood.png') repeat;
  border: 1px solid black;
  border-radius: 5px;
  perspective:800px; 
}
.background{
  padding:50px 10px;
  width:450px;
  background: url("http://sarasoueidan.com/RESOURCES/classy_fabric.png") repeat;
  margin:30px auto;
  position:relative;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-shadow: 0 0 7px rgba(0,0,0,0.6)
}
.clear{clear:both;}
.nav-cover{ 
  width:100%;
  height:70px; 
  background: url("http://sarasoueidan.com/RESOURCES/classy_fabric.png") repeat;
  line-height:45px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position:absolute;
  bottom:-70px;
  left:0;
  border-top: 1px solid rgba(0,0,0,0.2);
  
  transform-style: preserve-3d; 
  transition: all 0.3s ease-out; 
  transform-origin: top center; 
}
.nav-cover.open{ 
  transform: rotateX(150deg); 
  box-shadow: 0 10px 15px black;
}
.nav-cover a {
  position: absolute;
  left:30px;
  top:10px;
}
.nav-cover.open a{
  opacity:0.4;
}
.nav-cover.open .menu-icon {
  opacity:0.4;
}
.nav{
  width:100%;
  height:70px;
  position:absolute;
  bottom:-70px;
  left:0;
  padding: 10px 50px;
  
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.nav > span  {
  margin:12px;
  font-size:2.7em;
  color: #d29646;
  text-shadow: 1px 1px rgba(255,255,255,0.4), 0 -1px rgba(88, 32, 2, 0.7);
  cursor: pointer;
}
.nav > span:hover{
  color: #b27626;
}
.menu-icon{
  cursor:pointer;
  color:#ddd; 
  background: linear-gradient(#222328, #18191D);
  width:50px;
  height:35px;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1);
  border-radius: 3px; 
  position:absolute;
  right:30px;
  top:15px;
  float:right;
}
.menu-icon:before {
    border-bottom: 10px double #E0E0E0;
    border-top: 3px solid #E0E0E0;    
    content:"";
    height:5px; 
    position: absolute; 
    right:9px;  
    top: 8px; 
    width:30px;
}
.menu-icon img{
  position:absolute;
  top:-30px;
  right:-50px;
}
.hidden {display:none;}
figure{
  margin:20px;
  float:left;
}
.img-wrapper img {
  border:2px solid white;
  cursor: pointer;
  opacity:0.5;
  transition: opacity 0.3s linear;
}
.img-wrapper img:hover {
  opacity:1;
}
.img-wrapper{
  box-shadow: 0 3px 3px -1px black;
  margin-bottom: 20px;
  z-index: 10;
  position:relative;
}
.img-wrapper:before , .img-wrapper:after {
  display:block;
  content:"";
  width:100%;
  height:100%;
  background-color: #eee;
  background: url('http://sarasoueidan.com/RESOURCES/img5.jpg');
  border: 2px solid white;
  box-shadow: 0 3px 3px -1px black;
  position:absolute;
}
.img-wrapper:before{
  z-index: -10;
  transform: rotate(6deg);
  top:-2px;
  left:-2px;
}
.img-wrapper:after{
  z-index: -11;
  transform: rotate(-4deg);
  top:3px;
  right:2px;
}
figcaption{
  color:#D8D9DD;
  text-align:center;
  margin-top:30px;
}