Animation + vertical centering

HTML

<nav id="nav-container">
  <div id="small-nav-bar">
    <div id="small-nav-btn">BUTTON</div></div>
  <ul id="nav">
    <li><a href="contact.html"><span>HELLO</span></a></li>
    <li><a href="about.html"><span>HELLO</span></a></li>
  </ul>
  <div id="close-menu-cross">
    <div id="cross">X</div>
  </div>
</nav>

CSS

#nav {
  background: orange;
  position: fixed;
  top: 100%;                           
  left: 50%;
  transform: translate(-50%, -50%);   /* FOR DEMO */
  transition: all 0.8s linear 0.1s;
  z-index: 1556;
}
#nav.open {
  top: 50%;
  transform: translate(-50%, -50%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Now-Regular", sans-serif;
  font-size: 12px;
  font-weight: bold;
}
ul {
  list-style-type: none;
}
a {
  color: black;
}
#overlay {
  background: #fff;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: all 1s ease 0s;
  z-index: 1555;
}
#overlay.open {
  opacity: 1;
  height: 100%;
}
#small-nav-bar {
  display: block;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: black;
}
#small-nav-btn {
  cursor: pointer;
}
#close-menu-cross.open {
  display: block;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 1556;
  cursor: pointer;
}
#close-menu-cross {
  display: none;
}

JavaScript

$('#small-nav-btn').click(function() {
  $('#overlay').addClass('open');
  $('#close-menu-cross').addClass('open');
  $('#nav').addClass('open');
})

$('#cross').click(function() {
  $('#overlay').removeClass('open');
  $('#close-menu-cross').removeClass('open');
  $('#nav').removeClass('open');
})