Edit on
<div id="mobile">
  <div class="screen">
    <div class="header">
      <div id="toggle-btn" onclick="toggleMenu();">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="logo">Dashboard</div> 
    </div>
      <div id="menuitems">
        <ul>
          <li>
            <i class="fa fa-camera" aria-hidden="true"></i>
            <div class="tooltip">Post</div>
          </li>
          <li>
            <i class="fa fa-comments" aria-hidden="true"></i>
            <div class="tooltip">Messages</div>
          </li>
          <li>
            <i class="fa fa-globe" aria-hidden="true"></i>
            <div class="tooltip">Notifications</div>
          </li>
          <li>
            <i class="fa fa-user-plus" aria-hidden="true"></i>
            <div class="tooltip">Users</div>
          </li>
        </ul>
      </div>  
    <div id="content">
      <h2>Easy. Light. Epic.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas recusandae ullam repellat, soluta, reprehenderit suscipit reiciendis minus ratione alias dolor eveniet rerum.</p>
    </div>
  </div>
</div>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
html,body {
  height:100%;
}
body {
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Roboto Condensed', sans-serif;
  background:#55acee;
}

#mobile {
  width:250px;
  height:420px;
  background:rgba(32,32,32,0.95);
  border-radius:20px;
  padding:50px 10px 30px;
}
.screen {
  position:relative;
  width:100%;
  height:100%;
  background:white;
}

.header {
  position:absolute;
  width:100%;
  height:50px;
  background:#e7e7e7;
  text-align:center;
  line-height:50px;
  z-index:10000;
}
.header #toggle-btn{
  position:absolute;
}
.header #toggle-btn {
  left:15px;  
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor:pointer;
}
.header #toggle-btn span {
  display:block;
  width:17px;
  padding:1px 0px;
  background:#383838;
  margin:2px 0px;
  border-radius:5px;
  transition:all 300ms linear;
}
.header #toggle-btn.active span:nth-child(2) {
  display:none;
}
.header #toggle-btn.active span:nth-child(1) {
  transform:translateY(2px) rotate(-40deg);
}
.header #toggle-btn.active span:nth-child(3) {
  transform:translateY(-2px) rotate(40deg);
}
 #menuitems {
  position:relative;
  top:0px;
  z-index:1;
  width:100%;
  opacity:1;
  
}
 #menuitems ul {
  display:flex;
  left:40px;
  width:100%;
  justify-content:space-around;
}
 #menuitems ul li{
  list-style:none;
  display:block;
  width:50%;
  width:52px;
  height:52px;
  text-align:center;
  line-height:52px;
  background:#00acee;
  color:#e7e7e7;
  border-radius:50%;
  box-shadow:2px 2px 8px 3px rgba(100,100,100,0.12);
  transform:scale(0) rotate(0deg);
  transition:all 400ms ease-in-out;
  font-size:21px;
  cursor:pointer;
}
 #menuitems ul li .tooltip{
   font-size:13px;
   color:#151719;
   background:#fff;
   padding:0px 5px;
   height:22px;
   line-height:22px;
   border-radius:5px;
   text-transform:uppercase;
   opacity:0;
   margin-top:-10px;
   position: absolute;
   text-align: center;
   left: 50%;
   transform: translateX(-50%);   
   transition:all 250ms ease-in-out;
}
 #menuitems ul li:hover .tooltip{
  opacity:1;
  margin-top:5px; 
}
 #menuitems.active ul li {
  margin-top:55px;
  transform:scale(0.8) rotate(-360deg);
}
#menuitems.active ul li:nth-child(1){
  transition-delay:200ms;
  background:#7e54d2;
}
 #menuitems.active ul li:nth-child(2){
  transition-delay:400ms;
  background:#2da8dc;
}
 #menuitems.active ul li:nth-child(3){
  transition-delay:600ms;
  background:#56c133; 
}
 #menuitems.active ul li:nth-child(4){
  transition-delay:800ms;
  background:#F25F5C; 
}



div#content {
  position:absolute;
  top:50px;
  overflow-x:hidden;
  height:290px;
  padding:2px 5px;
  transition:all 300ms ease-in-out;
}
div#content.active {
  background:linear-gradient(rgba(0,0,10,0.9),rgba(0,0,0,0.95));
}
div#content h2 {
  margin:15px 0px;
  font-size:22px;
}
div#content p {
  font-size:13px;
}

var toggleBtnRef = document.getElementById('toggle-btn');
var menuItemsRef = document.getElementById('menuitems');
var contentRef = document.getElementById('content');
function toggleMenu(){
  menuItemsRef.classList.toggle('active');
  toggleBtnRef.classList.toggle('active');
  content.classList.toggle('active');
}
Rerun