Make a sweet mobile menu with CSS

Want this fancy menu? Try it out in this jsfiddle.

Sass

.menu
  height: 45px
  left: 0
  position: fixed
  top: 10px
  width: 70px

  &::before, &::after, span
    background-color: purple
    content: ''
    display: block
    height: 5px
    left: 20px
    position: absolute
    transition: none 0.5s ease 0.5s
    transition-property: transform, top, bottom, left, opacity
    width: 30px

  &::before
    top: 10px

  span
    top: 20px

  &::after
    top: 30px

   &.opening
    &::before, &::after
      top: 20px

    &::before
      transform: rotate(45deg)

    span
      left: -50px
      opacity: 0

    &::after
      transform: rotate(-45deg)

JavaScript

$('.menu').on('click', function(ev) {
  $(ev.target).toggleClass('opening')
});

HTML

<div class="menu">
  <span></span>
</div>