<div class="container">
  <div class="menu">
    <div class="menu__item">
      <div class="menu__item__icon">
        <i class="far fa-calendar-check"></i>
      </div>
      <div class="menu__item__text">Events</div>
      <div class="menu__item__dot"></div>
      <div class="circle"></div>
    </div>
    <div class="menu__item">
      <div class="menu__item__icon">
        <i class="fas fa-search"></i>
      </div>
      <div class="menu__item__text">Search</div>
      <div class="menu__item__dot"></div>
      <div class="circle"></div>
    </div>
    <div class="menu__item">
      <div class="menu__item__icon">
        <i class="fas fa-bolt"></i>
      </div>
      <div class="menu__item__text">Feed</div>
      <div class="menu__item__dot"></div>
      <div class="circle"></div>
    </div>
    <div class="menu__item">
      <div class="menu__item__icon">
        <i class="fas fa-sliders-h"></i>
      </div>
      <div class="menu__item__text">Settings</div>
      <div class="menu__item__dot"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>
$base-dark: #100e17;
$white: #fff;

body {
  background-color: #0b5cdd;
  margin: 0;
  padding-top: 40px;
  font-family: 'Open Sans', sans-serif;
}

// #toggle {
//   position: absolute;
//   top: 0;
//   height: 40px;
//   width: 100px;
//   font-size: 16px;
// }

.container {
  height: 120px;
  background-color: #fdfdfd;
  width: 550px;
  border-radius: 0 0 15px 15px;
  margin: auto;
}


.menu {
  height: 120px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.menu__item {
  height: 100%;
  color: #817d83;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.menu__item__icon {
  transition: all 0.4s ease-in-out;
  position: absolute;
  z-index: 0;
  font-size: 30px;
  bottom: calc(50% - 15px);
  
  &:before {
    content: '';
    transition: all 0.4s ease-in-out;
    width: 50px;
    height: 2px;
    position: absolute;
    background-color: $white;
    bottom: 0;
    left: -10px;
  }
  
  &.selected {
    transform: translateY(-90%);
    
    &:before {
      height: 36px;
    }
  }
}

.menu__item__text {
  font-weight: bold;
  color: $base-dark;
  transition: all 0.4s ease-in-out;
  position: absolute;
  bottom: 20px;
  
  &:before {
    content: '';
    transition: all 0.4s ease-in-out;
    width: 120%;
    height: 20px;
    position: absolute;
    background-color: $white;
    bottom: 0;
    left: -10%;
  }
  
  &.selected {
    transform: translateY(-32px);
    &:before {
      height: 2px;
    }
  }
}


.menu__item__dot{
  height: 7px;
  width: 7px;
  background-color: $base-dark;
  border-radius: 50%;
  position: absolute;
  bottom: 30px;
  transform: scale(0);
  transition: all 0.4s ease-in-out;
  
  &.selected {
    transform: scale(1);
  }
}

.circle {
  height: 0px;
  width: 0px;
  border-radius: 50%;
  background-color: lightgray;
  position: absolute;
  z-index: 10;
  top: 60px;
  transform: translate(0%, -50%);
  
  &.animate {
    animation: pulse 0.5s linear;
  }
}


@keyframes pulse {
  0% {
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    height: 80px;
    width: 80px;
    opacity: 0.0;
  }
}
View Compiled
/**
 * Based on Dribbble design by Cuberto
 * https://dribbble.com/shots/5605168-Toolbar-icons-animation
 */
(() => {
  'use strict';
  const menu = document.getElementsByClassName('menu')[0];
  const menuItems = document.querySelectorAll('.menu__item');
  const menuItemIcons = document.querySelectorAll('.menu__item__icon');
  const menuItemTexts = document.querySelectorAll('.menu__item__text');
  const menuItemDots = document.querySelectorAll('.menu__item__dot'); 
  const menuItemCircles = document.querySelectorAll('.circle');
  
  let currentIndex = 0;

  const init = () => {
    
    for (let i = 0; i < menu.children.length; i++) {
      (function(index){
        // menuItemCircles[i].addEventListener("webkitAnimationEnd", stopAnimation);
        // menuItemCircles[i].addEventListener("animationend", stopAnimation);
        menu.children[i].onclick = function(){
          unsetActiveMenuItem(currentIndex);
          setActiveMenuIndex(index);
          currentIndex = index;
        }
      })(i);
    } 
   
    setActiveMenuIndex(0);
  }

  
  const toggleAnimation = (i) => {
    menuItemCircles[i].classList.toggle('animate');
  }
  
  const unsetActiveMenuItem = (i) => {
    menuItemIcons[i].classList.toggle('selected');
    menuItemTexts[i].classList.toggle('selected');
    menuItemDots[i].classList.toggle('selected');
    toggleAnimation(i);
  }

  const setActiveMenuIndex = (i) => {
    menuItemIcons[i].classList.toggle('selected');
    menuItemTexts[i].classList.toggle('selected');
    menuItemDots[i].classList.toggle('selected');
    toggleAnimation(i);
  }


  document.addEventListener('DOMContentLoaded', function() {
    init();
  })
  
})();



 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.