cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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);
}
  
            
          
!
            
              // 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);
            
          
!
999px
Loading ..................

Console