Menu Button Click Animation

by Muhammad Hassaan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div id="primary-nav">
  <ul>
    <li><a href="#">Top Events</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Theaters</a></li>
    <li><a href="#">Concerts</a></li>
    <li><a href="#">Venues</a></li>
    <li><a href="#">Cities</a></li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

#primary-nav {
  width: 100%;
}

#primary-nav:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

#primary-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#primary-nav ul li {
  float: left;
  width: 14.28571428571429%;
  -webkit-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}

#primary-nav ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  color: #111;
  position: relative;
  overflow: hidden;
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
}

#primary-nav ul li a .ink {
  background: #ff9900;
}

#primary-nav ul li a:hover {
  box-shadow: 0 1px 0 #ff9900;
}

.ink {
  position: absolute;
  display: block;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  border-radius: 51%;
  background: rgba(255, 255, 255, 0.8);
}

.ink.spill {
  -webkit-animation: spill 0.65s ease;
  animation: spill 0.65s ease;
}

@-webkit-keyframes spill {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    transform: scale(3.5);
  }
}

@keyframes spill {
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
    transform: scale(3.5);
  }
}

JavaScript

var $button_ink = $('#primary-nav ul li a'),
  $ink, x, y, ink_diameter;
$button_ink.on('click', function(e) {
  //e.preventDefault();
  var $this = $(this);
  $this.find('.ink').remove();

  $this.prepend('<i class="ink" />');

  $ink = $this.find('.ink');
  ink_diameter = Math.max($this.outerWidth(), $this.outerHeight());

  // x and y coordinates for ink element
  x = e.pageX - $this.offset().left - (ink_diameter / 2);
  y = e.pageY - $this.offset().top - (ink_diameter / 2);

  $ink.removeClass('spill')
    .css({
      top: y,
      left: x,
      width: ink_diameter,
      height: ink_diameter
    })
    .addClass('spill');

  $this.blur();
});