A Pen by Antonio .

index.html

<div class="nav-mobile"></div>


<div class="central-menu show">
  
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>  
  
</div>

script.js

$('.nav-mobile').bind('click' , function () {
  
  
  $('.central-menu').toggleClass('show');
  
  
});
                  

style.css

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

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }




body {
  
   width:100%;
   height:100%;
   min-height:100%;
   padding:0;
   margin:0;
   font-family: 'Lato', sans-serif;
  
}

.nav-mobile {
  
  position:absolute;
  right:1em;
  top:1em;
  width:60px;
  height:60px;
  border:1px solid black;
  cursor :pointer;
 
  
}

.central-menu {
  border:0px solid black;
  width:100%;
  height:10%;
  display:table;
  position: fixed;
  top: 50%;
  left: 0%;
  padding:0px;
  opacity:0;
  transition : all 0.6s  cubic-bezier(0.25,0.1,0.25,1);
  transform : translate(100%);
  
}



.central-menu.show {

   opacity:1;
   transform : translate(0%);
  
}


.central-menu nav ul { padding:0; margin:0;}

.central-menu nav ul li {
  border:1px solid #161216;
  float:left;
  list-style-type: none;  
  margin:0px 0px 0px 0px;
  width:25%;
  text-align:center;
  background-/*image:url('https://2wetkq.bl3302.livefilestore.com/y2pxoNqAnAhtnw7-E6baMWK2OdN9nfhoRoH7uBKxORdrpFxvP8LXV_JKnjneR8cASDFBLKE72shQ8G3OfpmydCYUACqO682edrhB2iCKy67Yms/maze.jpg?psid=1');*/
 
}

.central-menu nav ul li a { 

  margin:10px 0px 10px 0px;
  display:block;
 
  padding-top:15px;
  height:50px;
  font-size:1.45em;
  width:100%;
  text-transform:uppercase;
  text-decoration:none;
/*  background:#fff;
  color:#13133;*/
  
}

.central-menu nav ul li { 
 
   transition : all 0.6s  cubic-bezier(0.15,0.1,0.25,1);
 

  
}

.central-menu nav ul li:hover{ 

  transform : translateY(-40%);
  /*margin:-75px 0px 0px 0px;*/
  padding-top:25px;
  height:220px;
  box-shadow : 0px 8px 13px #333;
}

.central-menu nav ul li:hover::after{ 
  width:25%;
  
}