An experiment, powered by a hidden resizable textarea.

index.html

<h1>Try to Pull the Arrow Down</h1>

<div class="wrapper">  
  
  <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">This is where the magic happens</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;
  
  z-index:3;
  width:12px;
  min-height:15px;
  height:15px;
  background-color:#00F;
  max-height:200px;
  left:50%;
  position:relative;
  margin-left:-5px;
}

.wrapper{
  position:absolute;
  left:50%;
  bottom:0px;
  margin-left:-100px;
  width:200px;
  min-height:15px;
  background-color:#F00;
  overflow:hidden;
  border-radius: 10px 10px 0 0;
  background-color:#444;
}

.content{
  z-index:2;
  position:absolute;
  top:20px;
  width:100%;
  height:168px;
  background-color:rgba(0,0,0,0.5);
  box-shadow: inset 0 0 50px 0 rgba(0,0,0,0.5);
}
.content ul{
  margin:0px;
  padding:15px 0 0 20px;
  list-style:none;
  font-family:'Myriad Pro','Open Sans', sans-serif;
  font-size:22px;
  color:#999;
}
.content a:hover{
  color:#DDD;
  margin-left:15px;
}
.content a{
  color:#999;
  cursor:pointer;
  transition:All 0.5s ease;
  text-decoration:none;
}
.wrapper:before{
  z-index:0;
  position:absolute;
  content:'';
  bottom:13px;
  left:50%;
  margin-left:-4px;
  border-top:8px solid #222;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
}

.me{
  color:#F99 !important;
}

h1{
  color:#999;
  font-size:24px;
  font-family: 'Myriad Pro','Open Sans',sans-serif;
  font-weight:400;
  width:200px;
  text-align:center;
  left:50%;
  position:absolute;
  margin-left:-100px;
  bottom:50px;
}