<nav class="icon-nav" aria-label="Navigation">
  <button class="icon-nav__toggle" title="Show Navigation">
    <span class="t-hidden">Show navigation</span>
    <svg class="icon-nav__toggle__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M992 384h-352v-352c0-17.672-14.328-32-32-32h-192c-17.672 0-32 14.328-32 32v352h-352c-17.672 0-32 14.328-32 32v192c0 17.672 14.328 32 32 32h352v352c0 17.672 14.328 32 32 32h192c17.672 0 32-14.328 32-32v-352h352c17.672 0 32-14.328 32-32v-192c0-17.672-14.328-32-32-32z"></path>
    </svg>
  </button>
  <ul class="icon-nav__actions" aria-hidden="true">
    <li>
      <button class="icon-nav__action icon-nav__action--edit" title="Edit">
        <span class="t-hidden">Edit</span>
        <svg class="icon-nav__action__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"></path>
        </svg>
      </button>
    </li>
    <li>
      <button class="icon-nav__action icon-nav__action--new" title="New">
        <span class="t-hidden">Add</span>
        <svg class="icon-nav__action__icon" role="presentation" viewBox="0 0 26 26" width="26" height="26"><path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"/></svg>
      </button>
    </li>
    <li>
      <button class="icon-nav__action icon-nav__action--delete" title="Delete">
        <span class="t-hidden">Delete</span>
        <svg class="icon-nav__action__icon" role="presentation" width="24" height="24" viewBox="0 0 1024 1024"><path d="M128 320v640c0 35.2 28.8 64 64 64h576c35.2 0 64-28.8 64-64v-640h-704zM320 896h-64v-448h64v448zM448 896h-64v-448h64v448zM576 896h-64v-448h64v448zM704 896h-64v-448h64v448z"></path><path d="M848 128h-208v-80c0-26.4-21.6-48-48-48h-224c-26.4 0-48 21.6-48 48v80h-208c-26.4 0-48 21.6-48 48v80h832v-80c0-26.4-21.6-48-48-48zM576 128h-192v-63.198h192v63.198z"></path>
        </svg>
      </button>
    </li>
  </ul>
</nav>
:root {
  --color-button: #B82601;
}

$-button-duration: .2s;

@mixin -buttons-reveal($number: 3, $grow: grow) {
  li {
    @if $grow == grow {
      animation-name: fade-in; 
      opacity: 0;
    } @else {
      animation-name: fade-out;
      opacity: 1;
    }
    animation-duration: $-button-duration / $number;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  @for $i from 1 through $number {
    $delay: $-button-duration * (($number - $i) / $number);
    
    @if $grow == grow {
      li:nth-child(#{$number + 1 - $i}) {
        animation-delay: $delay;
      }
    } @else {
      li:nth-child(#{$i}) {
        animation-delay: $delay;
      }
    }

  }
}

// Hidden text for screenreaders
.t-hidden {
  width: 1px;
  height: 1px;
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

// Menu
.icon-nav {
  display: flex;
  align-items: center;
  
  .icon-nav__actions {
    padding: 0;
    display: flex;
    align-items: center;
    border: none;
    list-style-type: none;
    
    li {
      opacity: 0;
    }
        
    &.active:not(.removing) {
      @include -buttons-reveal(3, grow);
    }
    
    &.removing {
      @include -buttons-reveal(3, fade);
    }
  }
}

// Buttons
.icon-nav__toggle,
.icon-nav__action {
  margin: 1em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-align: center;
  background-color: var(--color-button);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  
  path {
    fill: #fff;
  }
  
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px skyblue;
  }
  &:active {
    outline: 0;
    box-shadow: 0 0 5px gray;
  }
}

.icon-nav__toggle {
  transition: all .25s ease-out;

  path {
    fill: #fff;
  }
  
  &:hover {
    --color-button: #565656;
    transform: rotate(90deg);
  }
    
  &.active {
    transform: rotate(135deg);
  }
}

.icon-nav__action {
  &:hover {
    path {
      fill: darken(#fff, 10%);
    }
  }
}

.icon-nav__action--edit {
  --color-button: #4ABDAC;
}
  
.icon-nav__action--new {
  --color-button: #062F4F;
}
  
.icon-nav__action--delete {
  --color-button: #E37222;
}

// Animation
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
let timer;
let toggleIcon = document.querySelector('.icon-nav__toggle');
let revealWrapper = document.querySelector('.icon-nav__actions');
toggleIcon.addEventListener('click', () => {
  clearTimeout(timer);

  if (revealWrapper.classList.contains('active')) {
    revealWrapper.className = revealWrapper.className.replace(' active', ' removing'); 
    timer = setTimeout(function() {
      revealWrapper.className = revealWrapper.className.replace(' removing', ''); 
      toggleIcon.className = toggleIcon.className.replace(' active', '');
      revealWrapper.setAttribute('aria-hidden', 'true');
      revealWrapper.setAttribute('aria-expanded', 'false');
    }, 200);

  } else { 
    revealWrapper.className += ' active'; 
    toggleIcon.className += ' active'; 
    revealWrapper.setAttribute('aria-expanded', 'true');
    revealWrapper.setAttribute('aria-hidden', 'false');
  }
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.