A Pen by Caley Jack.

Animated-Hamburger---Spin.markdown

Animated Hamburger - Spin

Construct a hamburger button with minimal markup and animate the interactions.

A Pen by Caley Jack on CodePen.

License.

index.haml

%body
    %a.menu-trigger
        %span Menu

script.coffee

$('.menu-trigger').on 'click', ->
  $(@).toggleClass 'active'

style.sass

@import "compass"
body
  padding: 2em
  
a.menu-trigger
  cursor: pointer
  display: block
  position: relative
  width: 31px
  height: 20px
  text-indent: -9999em

a.menu-trigger span,
a.menu-trigger span:before,
a.menu-trigger span:after
  +single-transition(all, 0.4s)
  background-color: black
  display: block
  position: absolute
  width: 31px
  height: 4px
  left: 0
  
a.menu-trigger span:before,
a.menu-trigger span:after
  content: ""
  
a.menu-trigger span
  top: 8px
  
a.menu-trigger span:before
  +transform-origin(50%, 0)
  top: -8px
  z-index: 10
  
a.menu-trigger span:after
  +transform-origin(50%, 100%)
  top: 8px
  
a.menu-trigger.active span,
a.menu-trigger.active span:before,
a.menu-trigger.active span:after
  background-color: white
  
a.menu-trigger.active span
  //+rotate(-720deg)
    
a.menu-trigger.active span:before
  +transform(translateY(9px) translateX(1px) rotate(45deg))
  background-color: black

    
a.menu-trigger.active span:after
  +transform(translateY(-9px) translateX(1px) rotate(-45deg))
  background-color: black