<nav>
  <span id="menu-icon"><i class="fa fa-bars"></i></span>  
  <!-- menu items -->
  <a class="menu-item one" href="#"><i class="fa fa-calendar"></i></a>
  <a class="menu-item two" href="#"><i class="fa fa-info"></i></a>
  <a class="menu-item three" href="#"><i class="fa fa-user"></i></a>
  <a class="menu-item four" href="#"><i class="fa fa-gears"></i></a>
  <a class="menu-item five" href="#"><i class="fa fa-folder"></i></a>
  <a class="menu-item six" href="#"><i class="fa fa-question"></i></a>
</nav>

nav {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: #40403E;
}
span {
  background: #ccc;
  color: #40403E;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 36px fontawesome;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
span:hover {
  box-shadow: 0px 0px 30px 3px rgba(0,0,0,.5);
}
.menu-item {
  text-decoration: none;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  font: 42px fontawesome;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 1s ease,
              background .5s ease,
              color .5s ease;
  position: relative;
  index: -5;
}
.menu-item:hover {
  box-shadow: 0px 0px 30px 3px rgba(0,0,0,.5);
}
#menu-icon {
  transition: transform 1s ease;
}
#menu-icon.active {
  transition: all 1s ease; 
  transition-delay: 1.3s;
}
.one {
  transform: translate(-95px, 0px);
  background: #ccc;
  color: #4E7F5E;
}
.one:hover {
  background: #4E7F5E;
  color: #ccc;
}
.two {
  transform: translate(-185px, 0px);
  background: #ccc;
  color: #FF6B16;
  transition-delay: .2s, 0s, 0s;
}
.two:hover {
  background: #FF6B16;
  color: #ccc;
}
.three {
  transform: translate(-275px, 0px);
  background: #ccc;
  color: #2D7F7F;
  transition-delay: .4s, 0s, 0s;
}
.three:hover {
  background: #2D7F7F;
  color: #ccc;
}
.four {
  transform: translate(-365px, 0px);
  background: #ccc;
  color: #FFED23;
  transition-delay: .6s, 0s, 0s;
}
.four:hover {
  background: #FFED23;
  color: #ccc;
}
.five {
  transform: translate(-455px, 0px);
  background: #ccc;
  color: #381D7F;
  transition-delay: .8s, 0s, 0s;
}
.five:hover {
  background: #381D7F;
  color: #ccc;
}
.six {
  transform: translate(-545px, 0px);
  background: #ccc;
  color: #BF1A15;
  transition-delay: 1s, 0s, 0s;
}
.six:hover {
  background: #BF1A15;
  color: #ccc;
}
#menu-icon.active {
  transform: scale(.7, .7);    
}
.one.active {
  transform: translate(-90px, -115px);
}
.two.active {
  transform: translate(-80px, -50px);
}
.three.active {
  transform: translate(-180px, 70px);
}
.four.active {
  transform: translate(-380px, 120px);
}
.five.active {
  transform: translate(-560px, 50px);
}
.six.active {
  transform: translate(-640px, -60px);
}

$('#menu-icon').on('click', function() {
  if($('#menu-icon i').hasClass('fa-bars')) {
    //open menu
    $('#menu-icon i').removeClass('fa-bars');
    $('#menu-icon i').addClass('fa-close');
    $('.menu-item').addClass('active');
    $('#menu-icon').addClass('active');
  } else {
    //close menu
    $('#menu-icon i').removeClass('fa-close');
    $('#menu-icon i').addClass('fa-bars'); 
    $('.menu-item').removeClass('active');
    $('#menu-icon').removeClass('active');
  }
});