<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" />
<nav class="menu-opener">
  <div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
  <ul class="menu-inner">
    <li class="logo">
      <a href="#"><i class="h">S</i></a>
    </li>
    <li>
      <a href="#" class="selected"><i class="fa fa-user"></i></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-bell"></i></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-pencil"></i></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-rocket"></i></a>
    </li>
  </ul>
</nav>

body {
  background: url("http://one-div.com/codepen/menu/bg.jpg");
  background-size: cover;
  color: #fff;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.menu-opener,
.menu-opener:hover,
.menu-opener.active,
.menu-opener-inner,
.menu-opener-inner::before,
.menu-opener-inner::after,
.menu,
.menu.active {
  -webkit-transition: 250ms all;
  transition: 250ms all;
}

.menu-opener {
  background: #f2f2f2;
  cursor: pointer;
  height: 64px;
  position: absolute;
  bottom: 2%;
  left: 1%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 64px;
}

.menu-opener-inner {
  background: #727272;
  height: .5rem;
  margin-left: .75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
}

.menu-opener-inner::before,
.menu-opener-inner::after {
  background: #727272;
  content: '';
  display: block;
  height: .5rem;
  width: 2.5rem;
}

.menu {
  background: #f2f2f2;
  color: transparent;
  width: 64px;
  position: absolute;
  bottom: 2%;
  left: 1%;
  height: 0rem;
  z-index: -1;
  overflow: hidden;
}

ul.menu-inner {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu-inner li {
  display: block;
  text-align: center;
}

i.h {
  color: #fff;
  font: 700 48.28px Tahoma;
  line-height: 71px;
  text-shadow: 0px 0px #819da6, 1px 1px #819da6, 2px 2px #819da6, 3px 3px #819da6, 4px 4px #819da6, 5px 5px #819da6, 6px 6px #819da6, 7px 7px #819da6, 8px 8px #819da6, 9px 9px #819da6, 10px 10px #819da6, 11px 11px #819da6, 12px 12px #819da6, 13px 13px #819da6, 14px 14px #819da6, 15px 15px #819da6, 16px 16px #819da6, 17px 17px #819da6, 18px 18px #819da6, 19px 19px #819da6, 20px 20px #819da6, 21px 21px #819da6, 22px 22px #819da6, 23px 23px #819da6, 24px 24px #819da6, 25px 25px #819da6, 26px 26px #819da6, 27px 27px #819da6, 28px 28px #819da6;
}

.menu-inner a {
  display: table-cell;
  height: 71px;
  width: 71px;
  color: #727272;
  text-align: center;
  text-decoration: none;
}

.menu-inner a:hover {
  color: #333;
  background: #bababa;
}

.menu-inner a.selected {
  color: #333;
}

.logo {
  background-color: #a0c2ce;
  text-align: center;
  overflow: hidden;
}

.logo a:hover {
  background-color: #a0c2ce;
}

.menu-inner a > .fa {
  font-size: 28px;
  line-height: 71px;
}

.menu.active {
  height: -webkit-calc(100% - 2rem);
  height: calc(100% - 2rem);
}

.menu-opener-inner::before {
  -webkit-transform: translateY(-0.75rem);
  -ms-transform: translateY(-0.75rem);
  transform: translateY(-0.75rem);
}

.menu-opener-inner::after {
  -webkit-transform: translateY(0.25rem);
  -ms-transform: translateY(0.25rem);
  transform: translateY(0.25rem);
}

.menu-opener-inner.active {
  background: transparent;
}

.menu-opener-inner.active::before {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}

.menu-opener-inner.active::after {
  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

$(".menu-opener").click(function() {
  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});