CodePen Embed - Ink Drop Menu

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1" height="1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="15" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="goo" />
      <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
    <symbol id="icon-heart" viewBox="0 0 1030 900">
      <title>heart</title>
      <path class="path1" d="M512 950.857q-14.857 0-25.143-10.286l-356.571-344q-5.714-4.571-15.714-14.857t-31.714-37.429-38.857-55.714-30.571-69.143-13.429-78.857q0-125.714 72.571-196.571t200.571-70.857q35.429 0 72.286 12.286t68.571 33.143 54.571 39.143 43.429 38.857q20.571-20.571 43.429-38.857t54.571-39.143 68.571-33.143 72.286-12.286q128 0 200.571 70.857t72.571 196.571q0 126.286-130.857 257.143l-356 342.857q-10.286 10.286-25.143 10.286z"></path>
    </symbol>
    <symbol id="icon-camera" viewBox="0 0 1097 1024">
      <title>camera</title>
      <path class="path1" d="M548.571 384q68 0 116.286 48.286t48.286 116.286-48.286 116.286-116.286 48.286-116.286-48.286-48.286-116.286 48.286-116.286 116.286-48.286zM950.857 146.286q60.571 0 103.429 42.857t42.857 103.429v512q0 60.571-42.857 103.429t-103.429 42.857h-804.571q-60.571 0-103.429-42.857t-42.857-103.429v-512q0-60.571 42.857-103.429t103.429-42.857h128l29.143-77.714q10.857-28 39.714-48.286t59.143-20.286h292.571q30.286 0 59.143 20.286t39.714 48.286l29.143 77.714h128zM548.571 804.571q105.714 0 180.857-75.143t75.143-180.857-75.143-180.857-180.857-75.143-180.857 75.143-75.143 180.857 75.143 180.857 180.857 75.143z"></path>
    </symbol>
    <symbol id="icon-arrow-left" viewBox="0 0 877.7142857142858 1024">
      <title>arrow-left</title>
      <path class="path1" d="M877.714 512v73.143q0 30.286-18.571 51.714t-48.286 21.429h-402.286l167.429 168q21.714 20.571 21.714 51.429t-21.714 51.429l-42.857 43.429q-21.143 21.143-51.429 21.143-29.714 0-52-21.143l-372-372.571q-21.143-21.143-21.143-51.429 0-29.714 21.143-52l372-371.429q21.714-21.714 52-21.714 29.714 0 51.429 21.714l42.857 42.286q21.714 21.714 21.714 52t-21.714 52l-167.429 167.429h402.286q29.714 0 48.286 21.429t18.571 51.714z"></path>
    </symbol>
    <symbol id="icon-comment" viewBox="0 0 1024 1200">
      <title>comment</title>
      <path class="path1" d="M1024 512q0 99.429-68.571 183.714t-186.286 133.143-257.143 48.857q-40 0-82.857-4.571-113.143 100-262.857 138.286-28 8-65.143 12.571-9.714 1.143-17.429-5.143t-10-16.571v-0.571q-1.714-2.286-0.286-6.857t1.143-5.714 2.571-5.429l3.429-5.143t4-4.857 4.571-5.143q4-4.571 17.714-19.714t19.714-21.714 17.714-22.571 18.571-29.143 15.429-33.714 14.857-43.429q-89.714-50.857-141.429-125.714t-51.714-160.571q0-74.286 40.571-142t109.143-116.857 163.429-78 198.857-28.857q139.429 0 257.143 48.857t186.286 133.143 68.571 183.714z"></path>
    </symbol>
    <symbol id="icon-group" viewBox="0 0 1097 1024">
      <title>group</title>
      <path class="path1" d="M338.857 512q-92.571 2.857-151.429 73.143h-76.571q-46.857 0-78.857-23.143t-32-67.714q0-201.714 70.857-201.714 3.429 0 24.857 12t55.714 24.286 68 12.286q38.286 0 76-13.143-2.857 21.143-2.857 37.714 0 79.429 46.286 146.286zM950.857 876q0 68.571-41.714 108.286t-110.857 39.714h-499.429q-69.143 0-110.857-39.714t-41.714-108.286q0-30.286 2-59.143t8-62.286 15.143-62 24.571-55.714 35.429-46.286 48.857-30.571 63.714-11.429q5.714 0 24.571 12.286t41.714 27.429 61.143 27.429 77.143 12.286 77.143-12.286 61.143-27.429 41.714-27.429 24.571-12.286q34.857 0 63.714 11.429t48.857 30.571 35.429 46.286 24.571 55.714 15.143 62 8 62.286 2 59.143zM365.714 146.286q0 60.571-42.857 103.429t-103.429 42.857-103.429-42.857-42.857-103.429 42.857-103.429 103.429-42.857 103.429 42.857 42.857 103.429zM768 365.714q0 90.857-64.286 155.143t-155.143 64.286-155.143-64.286-64.286-155.143 64.286-155.143 155.143-64.286 155.143 64.286 64.286 155.143zM1097.143 494.286q0 44.571-32 67.714t-78.857 23.143h-76.571q-58.857-70.286-151.429-73.143 46.286-66.857 46.286-146.286 0-16.571-2.857-37.714 37.714 13.143 76 13.143 33.714 0 68-12.286t55.714-24.286 24.857-12q70.857 0 70.857 201.714zM1024 146.286q0 60.571-42.857 103.429t-103.429 42.857-103.429-42.857-42.857-103.429 42.857-103.429 103.429-42.857 103.429 42.857 42.857 103.429z"></path>
    </symbol>
    <symbol id="icon-bars" viewBox="0 0 877.7142857142858 1024">
      <title>bars</title>
      <path class="path1" d="M877.714 768v73.143q0 14.857-10.857 25.714t-25.714 10.857h-804.571q-14.857 0-25.714-10.857t-10.857-25.714v-73.143q0-14.857 10.857-25.714t25.714-10.857h804.571q14.857 0 25.714 10.857t10.857 25.714zM877.714 475.429v73.143q0 14.857-10.857 25.714t-25.714 10.857h-804.571q-14.857 0-25.714-10.857t-10.857-25.714v-73.143q0-14.857 10.857-25.714t25.714-10.857h804.571q14.857 0 25.714 10.857t10.857 25.714zM877.714 182.857v73.143q0 14.857-10.857 25.714t-25.714 10.857h-804.571q-14.857 0-25.714-10.857t-10.857-25.714v-73.143q0-14.857 10.857-25.714t25.714-10.857h804.571q14.857 0 25.714 10.857t10.857 25.714z"></path>
    </symbol>
    <symbol id="icon-angle-left" viewBox="0 0 366 1024">
      <title>angle-left</title>
      <path class="path1" d="M358.286 310.857q0 7.429-5.714 13.143l-224.571 224.571 224.571 224.571q5.714 5.714 5.714 13.143t-5.714 13.143l-28.571 28.571q-5.714 5.714-13.143 5.714t-13.143-5.714l-266.286-266.286q-5.714-5.714-5.714-13.143t5.714-13.143l266.286-266.286q5.714-5.714 13.143-5.714t13.143 5.714l28.571 28.571q5.714 5.714 5.714 13.143z"></path>
    </symbol>
    <symbol id="icon-angle-right" viewBox="0 0 366 1024">
      <title>angle-right</title>
      <path class="path1" d="M340 548.571q0 7.429-5.714 13.143l-266.286 266.286q-5.714 5.714-13.143 5.714t-13.143-5.714l-28.571-28.571q-5.714-5.714-5.714-13.143t5.714-13.143l224.571-224.571-224.571-224.571q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714 13.143-5.714t13.143 5.714l266.286 266.286q5.714 5.714 5.714 13.143z"></path>
    </symbol>
    
    <symbol id="icon-close" viewBox="0 0 1024 1024">
      <use xlink:href="#icon-angle-right" transform="translate(-110,0)"></use>
      <use xlink:href="#icon-angle-left" transform="translate(110,0)"></use>
    </symbol>
  </defs>
</svg>

<header class="menu" role="menubar">

  <button class="menu__control">
    <svg class="icon icon--menu" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="#icon-bars"></use>
    </svg>
    <svg class="icon icon--close" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="#icon-close"></use>
    </svg>
    <svg class="icon icon--back" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use fill="#FFF" xlink:href="#icon-angle-left"></use>
    </svg>
  </button>

  <div class="menu__options">

    <div class="menu__bg"></div>

    <nav class="menu__actions">

      <button class="action action--camera">
        <svg class="icon icon--camera" viewBox="0 0 1 1"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#icon-camera"></use>
        </svg>
      </button>

      <button class="action action--users">
        <svg class="icon icon--group" viewBox="0 0 1 1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#icon-group"></use>
        </svg>
      </button>

      <button class="action action--comments">
        <svg class="icon icon--comment" viewBox="0 0 1 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#icon-comment"></use>
        </svg>
      </button>

      <button class="action action--likes">
        <svg class="icon icon--heart" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="#icon-heart"></use>
        </svg>
      </button>

    </nav>

  </div>

</header>

<div class="content" role="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

html {
  height: 100%;
  background: #F1F1F1;
}

.no-button {
  background: transparent;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  
  &:hover,
  &:focus,
  &:active { outline: none; }
}


.menu__control {
  &:extend(.no-button all);
  
  .icon { 
    .show-icon;
    //transform: translateX(0em);
    transition: transform 1000ms cubic-bezier(.11,1,0,1) 0ms;
    transition-property: transform, opacity;
  }
  
  .icon--menu { z-index: 1; }
  .icon--close { z-index: 2; }
  .icon--back { z-index: 3; }
  
  .icon--close,
  .icon--back { &:extend(.hide-icon); }
  
  .menu--open & {
    .icon--close { &:extend(.show-icon); }
    .icon--menu { &:extend(.hide-icon); }
  }
  
  .menu--active & {
    .icon--close { transition-delay: 400ms; }
    .icon--back { &:extend(.show-icon); transition-delay: 600ms; }
    .icon--menu { &:extend(.hide-icon); }
  }
}


.hide-icon { transform: scale(0); opacity: 0; }
.show-icon { transform: scale(1); opacity: 1; }


////////////////////////////////////////


.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF;
}

.menu__options,
.menu__actions {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

.menu__options {
  filter: url(#goo);
}

.menu__bg { 
  width: 100%;
  height: 100%;
  background: #FFF;
  filter: blur(7px);
  margin-top: -7px;
}

.menu,
.menu__bg {
  transition: background-color 500ms ease-in-out 0ms;
}

.menu--active,
.menu--active .menu__bg {
  transition-delay: 300ms;
}

.menu--camera { &, .menu__bg { background-color: #309EE4; } }
.menu--users { &, .menu__bg { background-color: #0AB5A8; } }
.menu--comments { &, .menu__bg { background-color: #F7C524; } }
.menu--likes { &, .menu__bg { background-color: #F28F1B; } }

.menu__actions {
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  padding: 2em 1em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Action Buttons */

.menu__control {
  width: 20%;
}

.menu__control,
.action {
  &:extend(.no-button all);
  
  border-radius: 50%;
  
  position: relative;
  
  max-width: 6em;

  &::after {
    content: ' ';
    display: block;
    padding-top: 100%; 
  }
  
  .icon { 
    fill: currentColor;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    max-width: 50%;
  }
}

.action {
  background: #000;
  color: #FFF;
  width: 25%;
  margin: 0 1em;
}

.action--camera { background-color: #309EE4; }
.action--users { background-color: #0AB5A8; }
.action--comments { background-color: #F7C524; }
.action--likes { background-color: #F28F1B; }


.nth-offset(@index, @property: transition-delay, @start: 400ms, @offset: 50ms) when (@index > 0) {
  &:nth-child(@{index}) {
    @{property}: @start+ (@offset * (@index - 1)), 1000ms;
  }
  .nth-offset(@index - 1, @property, @start, @offset);
}

.action {
  transform: translateY(-200%) scale(0.5,1.5);
  transition: transform 500ms ease-in-out, visibility 0ms linear 600ms;
  transition-timing-function: cubic-bezier(0.8,.01,.6,.14), linear;
  visibility: visible;
  .nth-offset(5, transition-delay, 0, 150ms); 
  
  .icon { 
    transform: scale(0);
    transition: transform 600ms ease-in-out;
    transition-delay: inherit;
  }
}

.menu--open {
  .action { 
    transform: translateY(0) scale(1,1);
    transition-duration: 600ms, 0ms;
    transition-timing-function: cubic-bezier(0,.01,0,1), linear; //cubic-bezier(.06,.88,.6,.97), linear; //cubic-bezier(.11,1,0,1), linear;
    visibility: visible;
    
    .icon { transform: scale(1); }
  }
}

.menu--active {
  .action { 
    transform: translateY(0) scale(0);
    visibility: hidden;
    //.icon { transform: scale(0) rotate(90deg); }
  }
}

.menu--camera .action--camera,
.menu--users .action--users, 
.menu--comments .action--comments,
.menu--likes .action--likes { 
  transform: translateY(-200%) scale(0.4,1.5);
  transition-duration: 900ms, 0ms;
  transition-delay: 0ms, 0ms;
  visibility: visible;
}


////////////////////////////////////////

.content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 1em 0.5em;
  padding-top: 5.5em;
}

.box {
  background: #eaeaea;
  margin: 0.5em;
  padding-top: 30%;
  flex: 1 1 40%;
  
  @media (min-width: 800px) { flex-basis: 30%; }
//  flex-basis: calc(45% - 2em);
}

View Compiled

// https://dribbble.com/shots/2060856-Ink-Drop-Menu

console.clear();

var $menu = $('.menu'),
    $menuControl = $menu.find('.menu__control'),
    menuStates = 'menu--camera menu--likes menu--comments menu--users',
    menuClasses = '.'+ menuStates.split(' ').join(', .');

$menuControl.on('click',function(){
  if ( $menu.hasClass('menu--active') ) {
    $menu.removeClass(menuStates + ' menu--active menu--open');
  } else {
    $menu.toggleClass('menu--open');
  }
});


$('.action').on('click',function(){
  $menu
    .removeClass('menu--open ' + menuStates)
    .addClass('menu--active');
});

$('.action--camera').on('click',$menu.addClass.bind($menu,'menu--camera'));
$('.action--users').on('click',$menu.addClass.bind($menu,'menu--users'));
$('.action--comments').on('click',$menu.addClass.bind($menu,'menu--comments'));
$('.action--likes').on('click',$menu.addClass.bind($menu,'menu--likes'));


setTimeout($menuControl.click.bind($menuControl),300);
//setTimeout($menuControl.click.bind($menuControl),1400);

This Pen is owned by Shaw on CodePen.

See more by @shshaw on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css

External CSS

External JavaScript