Hamburger-menu-flip-with-text-change.markdown

Hamburger menu flip with text change

I really dig the whole menu layout of http://couleecreative.com/ so here is my take on the hamburger animation

A Pen by Eric Grucza on CodePen.

License.

index.haml

%header
  %a.menu-cont{:href => :'#'}
    %span.menu
    %span.menu-txt{:data => {:text => 'Close'}}
      Open

script.js

$('.menu-cont').on('click', function() {
  
  var open = $('.menu-txt').text();
	var close = $('.menu-txt').attr('data-text');
  
  $('.menu').toggleClass('active');
  
  if ($('.menu-txt').text(open)) {
  	$('.menu-txt').text(close);
  } else {
    $('.menu-txt').text(open);
  } 
  	$('.menu-txt').attr('data-text',open);
})

style.scss

@import "bourbon";
body {
  height: 100%;
  width: 100%;
  background-color: rgba(46, 63, 67, 0.98);
  font-family: 'Play', sans-serif;
  overflow: hidden;
}

.menu-cont {
  float: right;
  display: block;
  cursor: pointer;
  padding: 20px;
}

.menu-txt {
  display: inline-block;
  margin-right: 15px;
  position: relative;
  bottom: 3px;
  color: white;
  text-transform: uppercase;
  font-size: em(20px);
  letter-spacing: 6px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

.menu {
  content: "";
  display: inline-block;
  position: relative;
  float: right;
  opacity: 1;
  height: 3px;
  width: 30px;
  background-color: white;
  
  transition: transform 400ms ease;
  
  &.active {
    transform: rotate(45deg) translateY(12px);
    &:before {
      opacity: 0;
    }
    
    &:after {
      transform: rotate(-450deg) translateX(16px);
    }
  }
  
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    height: 3px;
    width: 30px;
    background-color: white;
  }
  
  &:before {
    top: 8px;
    
    transition: opacity 400ms ease;
  }
  
  &:after {
    top: 16px;
    
    transition: transform 400ms ease;
  }
}