<ul class="navbar">
  <li class="active"><a class="fa fa-twitter" href="#"></a></li>
  <li><a class="fa fa-facebook" href="#"></a></li>
  <li><a class="fa fa-codepen" href="#"></a></li>
  <li><a class="fa fa-google-plus" href="#"></a></li>
  <li><a class="fa fa-github-alt" href="#"></a></li>
  <li><a class="fa fa-cog" href="#"></a></li>
</ul>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #14171A;
  font-family: 'Roboto', sans-serif;
  padding: 25px;
  text-align: center;
}

.navbar {
  background: #33363D;
  display: inline-block;
  padding: 0 15px;
  position: relative;
}
.navbar li {
  display: table-cell;
  padding: 15px;
  min-width: 75px;
  text-align: center;
}
.navbar li a {
  display: block;
  color: #14171A;
  text-decoration: none;
  font-size: 32px;
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
}
.navbar li.active a {
  color: #fff;
  text-shadow: 1px 1px 2px #14171A;
}
.navbar li.marker {
  display: inline-block;
  position: absolute;
  height: 2px;
  padding: 0;
  background: #F45F5F;
  -webkit-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
  top: calc(100% - 2px);
  left: 15px;
}
.navbar li.anim {
  -webkit-animation: 0.4s shake ease-in;
  animation: 0.4s shake ease-in;
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

var navBar = $('.navbar');
navBar.append('<li class="marker"></li>');

navBar.on("click" , "a" , function(){
  
    var navTap = $(this).closest('.navbar');
    var mrkWidth = $(this).parent('li').width();
    var marker = navTap.find('.marker');
    var nx = $(".navbar").offset();
    var lx = $(this).parent('li').offset();
    var left = lx.left - nx.left;
    
   navBar.find('li').removeClass('active');
  
   $(this).parent().addClass('active');
  
    marker.removeClass("anim").css({ "width" : mrkWidth , "left" : left });
    setTimeout(function(){
      marker.addClass("anim")
    },200);

});