animated menu dots

by Alexandru Gatea

HTML

<div class="dots-burger">
  <span class="dot first"></span>
  <span class="dot second"></span>
  <span class="dot third"></span>
</div>

SCSS

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

.dots-burger {
  position:relative;
  width:50px;
  height:50px;
  padding:5px;
  cursor:pointer;
  transition: all 0.25s linear;
  .dot {
    width:10px;
    height:10px;
    display:block;
    background:#444;
    border-radius:50%;
    position:relative;
    left:50%;
    margin-left:-5px;
    &:not(:last-child) {
      margin-bottom:5px;
    }
    &.first, &.third {
      background:transparent;
      &:after, &:before {
        content: "";
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        border-radius: 50%;
        background:#444;
        transition: all 0.4s cubic-bezier(1, -0.72, 0.13, 1.48);
      }
    }
  }
  &.open {
    transform:rotate(360deg);
    .dot {
      &.first, &.third {
        &:before {
          margin-left:-15px;
        }
        &:after {
          margin-left:15px;
        }
      }
    }
  }
}

JavaScript

jQuery(document).ready(function($) {
  $('.dots-burger').on('click', function() {
    $(this).toggleClass('open');
  });
});