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

<p>CLICK ME</p>
$snappy: cubic-bezier(0.55, 0, 0.1, 1);

* {
  box-sizing: border-box;
  font-weight: 200;
  font-family: 'Cairo', sans-serif;
}

html {
  height: 100%;
  font-size: 10px;
}

body {
  min-height: 100%;
  font-size: 1.6rem;
  background: tomato; // fallback for older browsers
  background: -webkit-linear-gradient(135deg, #2D3A62, #55375E); 
  background: -o-linear-gradient(135deg, #2D3A62, #55375E); 
  background: -moz-linear-gradient(135deg, #2D3A62, #55375E);  
  background-image: linear-gradient(135deg, #2D3A62, #55375E); 
}

.menu {
  position: absolute;
  top: 0;bottom: 0;right: 0;left: 0;
  margin: auto;
  height: 30px;
  width: 30px;
  cursor: pointer;
  
  .bar {
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    background: #fff;
    
    &:first-of-type {
      top: 8px;
      transition: all .4s $snappy;
    }
    &:last-of-type {
      bottom: 8px;
      transition: all .4s $snappy;
    }
  }
  
  &.menu-open {
    
    .bar {
      
      &:first-of-type {
        top: 14px;
        transform: rotate(45deg);
      }
      &:last-of-type {
        bottom: 14px;
        transform: rotate(135deg);
      }
    }
  }
}

p {
  text-align: center;
  color: #fff;
  top: 60px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  height: 30px;
  font-weight: 300;
  cursor: pointer;
}
$(document).ready(function(){
  $('body').on('click', function(){
    $('.menu').toggleClass('menu-open');
  })
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js