<div class="container">
  <i class="fa fa-bars" title="Click me!"></i>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

<a href="https://kieranhunter.co.uk" target="_blank">Pen by Kieran hunter</a>

body {
  font-size:12px;
  font-family:sans-serif;
  background:#b8e3ef;
  text-align:center;
}
.container {
  text-align:center;
  /* perfect centering */
  left:50%;
  top:50%;
  position: absolute;
  transform:translate(-50%,-50%);
  width:100%;
  max-width:350px;
}
ul {
  list-style: none;
  padding: 0;
  background:#93c7d6;
  max-height: 0;
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  visibility: hidden;
  border-radius:3px;
  opacity:0;
  transform:rotate(180deg);
}

li a {
  padding:12px 0;
  display: block;
  transition:.25s
}
li a:hover {
  background: #6fabbc;
}

a {
  color:#fff;
  text-transform:uppercase;
  text-decoration: none;
}
i {
  padding:20px;
  background: rgba(255,255,255,.75);
  border-radius:3px;
  color:#6fabbc;
  transition:.25s;
  animation: 1.25s bounce infinite;
}
i:hover {
  cursor:pointer;
  background: rgba(255,255,255,.95);
  animation-play-state: paused;
}
ul.open {
  max-height: 480px;
  visibility: visible;
  opacity:1;
  transform:rotate(0);
}
/* animation */
@keyframes bounce {
  0% {margin-top:0;}
  50% {margin-top:-15px; margin-bottom:15px;}
  100% {margin-top:0;}
}

/* Credit */

.container ~ * {
  color:#fff;
  text-transform:uppercase;
  position: absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
}

$("i").click(function () {
  $("ul").toggleClass("open");
});