A CodePen by Mohamed Moustafa. CSS Hidden Navigation - An experiment, powered by a hidden resizable textarea.

index.html

<h1>Try to Pull the Arrow <span class="me">Down</span></h1>

<div class="wrapper wbot">
  <div class="content">    
    <ul>
      <li><a href="#">Cool, HUH</a></li>
      <li><a href="#">Try to</a></li>
      <li><a href="#">Pull the</a></li>
      <li><a href="#">Arrow Up</a></li>
      <li><a href="http://codepen.io/mmoustafa" target="_blank" class="me">mmoustafa</a></li>
    </ul>
  </div>
  <textarea class="elevator"></textarea>
</div>

<div class="wrapper wtop">  
  <div class="content ctop">    
    <ul>
      <li><a href="#">Cool, HUH</a></li>
      <li><a href="#">Try to</a></li>
      <li><a href="#">Pull the</a></li>
      <li><a href="#">Arrow Up</a></li>
      <li><a href="http://codepen.io/mmoustafa" target="_blank" class="me">mmoustafa</a></li>
    </ul>
  </div>   
  <textarea class="elevator"></textarea>
</div>

style.css

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

body{
  padding:0px;
  margin:0px;
  background-color:#222;
  line-height:26px;
}
.elevator{  
  resize:vertical;
  opacity:0;
  
  position:relative;
  top:1px;
  left:50%;
  margin-left:-6px;
  width:15px;
  height:15px;
  min-height:15px;
  max-height:200px;
  cursor:pointer;
  z-index:3;
  background-color:#00F;  
}
.wrapper{
position:absolute;
  left:50%;
width:200px;
  min-height:13px;
  background-color:#F00;
  overflow:hidden;
  background-color:#444;
}
.wbot{
  bottom:0px;
  top:auto;
  margin-left:-210px;
  border-radius: 10px 10px 0 0;
  
}
.wtop{
  top:0px;
  bottom:auto;
  margin-left:10px;
  border-radius: 0 0 10px 10px;
}
.wbot:before{
  content:'';
  position:absolute;
  bottom:11px;
  left:50%;
  margin-left:-4px;
  z-index:0;
  
  border-top:8px solid #222;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}
.wtop:before{
  content:'';
  position:absolute;
  bottom:6px;
  left:50%;
  margin-left:-4px;
  z-index:0;
  
  border-top:8px solid #222;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}

.content{
  position:absolute;
  top:18px;
  width:100%;
  height:165px;
  z-index:2;
  
  background-color:rgba(0,0,0,0.5);
  box-shadow: inset 0 0 50px 0 rgba(0,0,0,0.5);
}
.ctop{
  bottom:20px;
  top:auto;
}
.content ul{
  padding:15px 0 0 20px;
  margin:0px;
  
  list-style:none;
  font-family:'Myriad Pro','Open Sans', sans-serif;
  font-size:22px;
  color:#999;
}
.content a:hover{
  margin-left:15px;
  color:#DDD;
}
.content a{
  color:#999;
  cursor:pointer;
  transition:All 0.5s ease;
  text-decoration:none;
}
.me{
  color:#F99 !important;
}
h1{
  position:absolute;
  top:50%;
  margin-top:-24px;
  left:50%;
  margin-left:-100px;
  width:200px;  
  
  font-family: 'Myriad Pro','Open Sans',sans-serif;
  color:#999;
  font-size:24px;
  font-weight:400;
  text-align:center;
}