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.
%header | |
%a.menu-cont{:href => :'#'} | |
%span.menu | |
%span.menu-txt{:data => {:text => 'Close'}} | |
Open |
$('.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); | |
}) |
@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; | |
} | |
} |