<nav class="vertical">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">
    <span class="fa fa-bars"></span>
  </label>
  <menu>
    <li><a class="fa fa-home" href="#"></a></li>
    <li><a class="fa fa-user" href="#"></a></li>
    <li><a class="fa fa-image" href="#"></a></li>
    <li><a class="fa fa-video-camera" href="#"></a></li>
  </menu>
</nav>
<nav class="horizontal">
  <input type="checkbox" id="toggle" />
  <label for="toggle">
    <span class="fa fa-bars"></span>
  </label>
  <menu class="cover">
    <li><a class="fa fa-home" href="#"></a></li>
    <li><a class="fa fa-user" href="#"></a></li>
    <li><a class="fa fa-image" href="#"></a></li>
    <li><a class="fa fa-video-camera" href="#"></a></li>
  </menu>
</nav>
/* Both
**********************************************/

@import url( https://fonts.googleapis.com/css?family=Quantico );
body {
  background-color: #333;
  font-size       : 31px;
}

nav {
  overflow : hidden;
}

nav input[type=checkbox] {
  display : none;
}

menu {
  position : relative;
  transition  : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

label {
  position: relative;
  z-index : 2;
}

li {
  list-style-type: none;
}

a , label {
  display : block !important;
  width   : auto  !important;
  text-decoration : none;
  background      : linear-gradient(#292929, #242424);
  color   : #FFF;
  padding : 20px 23px;
  border  : 1px solid black;
}

a:after {
  content : '';
  position: absolute;
  display : none;
  font-size   : 18px;
  font-family: 'Quantico' , georgia;
  line-height : 18px;
  text-align : center;
  color  : #fff;
  text-shadow : none;
  padding : 30px 20px;
  text-transform : capitalize;
}


li:hover a:after {
  display : block;
}

li:first-child:hover a:after {
  content : 'home';
}

li:nth-child(2):hover a:after {
  content : 'about';
}

li:nth-child(3):hover a:after {
  content : 'gallery';
}

li:nth-child(4):hover a:after {
  content : 'video';
}

span {
  display     : inline-block;
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

menu a:hover {
  box-shadow  : inset 0 0 0 4px #B93632;
  text-shadow : 0 0 2px #B93632;
  background  : #1B1B1B;
}

/* Horizontal 
**********************************************/

.horizontal label {
    float : left;
}

.horizontal menu {
    float : left;
    left  : 0;
}

.horizontal li {
  float : left;  
}

.horizontal label , .horizontal a {
  border-right-color : rgba(255,255,255,0.1);  
}

.horizontal li:last-child a {
  border-right : 1px solid black ;
}

.horizontal a:after {
  top     : 0;
  left    : 100%;
}

#toggle:checked ~ menu {
  left       : -312px;
  transition : left .4s cubic-bezier(0.86, 0, 0.07, 1);
}

#toggle:checked ~ label span {
  transform : rotate(-90deg);
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

/* Vertical
**********************************************/

nav.vertical {
  height: 500px;
  width : 80px;
  float : right;
}

.vertical menu {
  top   : -332px;
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

.vertical a , .vertical label {
  border-top-color : rgba(255,255,255,0.1);
}

.vertical a:after {
  padding : 20px 0;
  width   : 100%;
  left : 0;
  top  : 100%;
}

.vertical span {
  transform  : rotate(90deg);
}

#toggle2:checked ~ menu {
  top   : 0;
  transition   : top .4s cubic-bezier(0.86, 0, 0.07, 1);
}

#toggle2:checked ~ label span {
  transform  : rotate(0deg);
  transition : all .4s cubic-bezier(0.86, 0, 0.07, 1);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.