A Pen by Jacob Arriola.

Hamburger menu demo

BuHFl
-----


A [Pen](http://codepen.io/jacobarriola/pen/BuHFl) by [Jacob Arriola](http://codepen.io/jacobarriola) on [CodePen](http://codepen.io/).

[License](http://codepen.io/jacobarriola/pen/BuHFl/license).

index.html

<h1>Hamburger Menu Demo</h1>
  <div class="menu">
    <span class="hamburger"></span>
  </div>
  

script.js

  $('.menu').click(function(){
    $('.menu').toggleClass('clicked');
  }); 
  

  

style.scss

// variables
$bar-color:  black;
$transition-time: .1s;
$transition-type: ease-out;


// the good stuff
.menu {
  position: relative;
  height: 100px;
  width: 100px;
  margin: auto;
  display: block;
  cursor: pointer;
  margin-top: 50px;
}



.hamburger {
  display: block;
  position: absolute;
  top: 30px;
  width: 100px;
  height: 10px;
  background: $bar-color;
  border-radius: 12px;
  transition:$transition-time $transition-type;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 10px;
    background: $bar-color;
    border-radius: 12px;
    transition: $transition-time $transition-type;
  }
  
  &:before {
    top: 20px;
  }
  
  &:after {
    bottom: 20px;
  }
  

}

.clicked {
  .hamburger {
    background: transparent;
    transition:$transition-time $transition-type;
    
    &:before {
      top: 0;
      transform: rotate(45deg);
      transition:$transition-time $transition-type;
      }
    &:after {
      bottom: 0;
      transform: rotate(-45deg);
      transition:$transition-time $transition-type;
      }
  }
}


h1 {
  text-align: center;
}