<div class="dotted-menu">
  <div></div>
  <div></div>
  <div></div>
  <span class="text-menu">Menu</span>
</div>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

body {margin: 40px; font-family: 'Lato'}
.dotted-menu {
  position: relative;
  height: 48px;
  width: 48px;
  display: block;
  margin: 0px auto;
  cursor: pointer;

  -webkit-transform: translate3d(0, 0, 0) rotate(0);
   -moz-transform: translate3d(0, 0, 0) rotate(0);
   -ms-transform: translate3d(0, 0, 0) rotate(0);
   transform: translate3d(0, 0, 0) rotate(0);
  -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
      border-radius: 100%;     

  &.focus {
    border-radius: 100%;     
  }
  
  &.unclicked {
    animation: rotateOut .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    
    > div:nth-child(1) {
      transform-origin: 25% 50%;
      animation: swirl .8s;
   }
    
  }
  
  &.active {
    animation: rotateIn .22s .14s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    
    
    > div {
      height: 32px;
      border-radius: 16px;
      transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
      background-color: #a4a9ad;

    }
    > div:nth-child(1) {
      opacity: 0;
      height: 0;
   }
    
    > div:nth-child(2) {
      top: 50%;
   }
    
    > div:nth-child(3) {
      transform: rotate(90deg) translate(-50%, -50%);
      top: -20px;
      left: 4px;
   }
    
    .text-menu {
      opacity: 0;
      transition: opacity .2s ease;
    }
  }

  > div {
    content: "";
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #7e4082;
    border-radius: 50%;
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

 > div:nth-child(2) {
    top: 4px;
 }


  > div:nth-child(3) {
    top: 20px;
  }
  
  .text-menu {
      position: relative;
      bottom: 10px;
    left: -26px;
      display: block;
    color: #5c6670;
    font-size: 15px;
    transition: opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition-delay: .14s;
  }
}

@keyframes rotateIn {
  from {transform: rotate(0deg);
  -moz-box-shadow: 0 0 0 0 rgba(209, 211, 211, .7);
    box-shadow: 0 0 0 0 rgba(209, 211, 211, .7);
  }
  to {transform: rotate(45deg);
      -moz-box-shadow: 0 0 0 12px rgba(209, 211, 211, 0);
    box-shadow: 0 0 0 12px rgba(209, 211, 211, 0);
}
}

@keyframes rotateOut {
  0% {transform: rotate(45deg);
    -moz-box-shadow: 0 0 0 0 rgba(209, 211, 211, .7);
    box-shadow: 0 0 0 0 rgba(209, 211, 211, .7);
}
  100% {transform: rotate(0deg);
        -moz-box-shadow: 0 0 0 12px rgba(209, 211, 211, 0);
    box-shadow: 0 0 0 12px rgba(209, 211, 211, 0);
}
}

@keyframes swirl {
    from { transform: rotate(180deg) translateY(28px) translateX(-4px) rotate(-180deg); }
    to   { transform: rotate(0deg) translateY(-4px) translateX(-4px) rotate(0deg); }
}

$( document ).ready(function() {

  $('.dotted-menu').on('click', function(){
    $(this).toggleClass('active');
    
    if ($(this).hasClass('active')){
      $(this).removeClass('unclicked');
      $(this).addClass('unclicked');
    } else {
          $(this).addClass('unclicked');
    }        
    return false;
  })  
})