<nav class="top-right open">
  <a class="disc l1">
    <div>Messages</div>
  </a>
  <a class="disc l2">
    <div>Photos</div>
  </a>
  <a class="disc l3">
    <div>Profile</div>
  </a>
  <a class="disc l4">
    <div>Likes</div>
  </a>
  <a class="disc l5 toggle">
    Menu
  </a>
</nav>

$size : 50px;
$items : 5;
$transition : .5s;
$bounce : cubic-bezier(.3,1.4,.5,.9);
$color-inner : gold;
$color-outer : tomato;
$background: mix($color-inner, $color-outer);
$black : shade($color-outer, 80%);
$start-scale : .5;
$start-rot : 190deg;

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800,900');

html, body { height: 100%; }
body {
  background: beige;
  font-family: Alegreya Sans, sans-serif;
}

nav {
  display: block;
  position: fixed;
  width: $size * $items * 2;
  height: $size * $items * 2;
  user-select: none;
  transform: translate3d($size*.5,-$size*.5,0);
  transition: transform $transition $bounce;
  
  &.open {
    transform: translate3d(0,0,0);
  }
  
  &.top-right {
    top: -$size * ($items - 2.2);
    right: -$size * ($items - 2.2);
  }
}

.disc { 
  position: absolute;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font: $size*.5 Alegreya Sans, sans-serif;
  line-height: $size * .8;
  padding-top: $size * .2;
  border-radius: $size * $items;
  transform: scale3d($start-scale, $start-scale, $start-scale) rotate3d(0,0,1,$start-rot);
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  transition: transform $transition $bounce, opacity $transition;
  
  div {
    transform: rotate(180deg);
  }
  
  .open & {
    pointer-events: auto;
    opacity: 1; 
  }
}

@for $i from 1 through $items {
  .l#{$i} {
    $i : $i - 1;
    $-i : $items - $i;
    $pct : $i/$items * 100%;
    $color :  mix($color-inner, $color-outer, $pct);
    
    top: $i * $size;
    left: $i * $size;
    right: $i * $size;
    bottom: $i * $size;
    background: $color;
    transition-delay: $i * $transition/$items;
  
    .open & {
      transition-delay: $i * $transition/$items;
      transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot);
      opacity: 1;
      
      &:hover {
        background: shade($color, 90%);
        color: $color;
        transition-delay: 0s;

      }
  
      &:active {
        background: shade($color, 50%);
        color: $color;
      }
      
      &.toggle {
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,$start-rot - 180deg);
      }
    }
  }
}

.toggle {
  line-height: $size*2;
  padding: 0;
  width: $size*2;
  background: $color-inner;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
  
  .open & {
    transform: rotate3d(0,0,1,0deg);
  }

  &:hover {
    background: shade($color-inner, 90%);
    text-decoration: underline;
  }
  &:active {
    background: shade($color-inner, 50%);
    color: rgba($color-inner, .5);
    transform: scale(.9);
    transition-duration: 0s;
  }
}

toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';

toggle.addEventListener('click', function() {
  nav.classList.toggle('open');
  
  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);

setTimeout(function(){
  nav.classList.toggle('open'); 
}, 800);