Construct a hamburger button with minimal markup and animate the interactions.
A Pen by Caley Jack on CodePen.
Construct a hamburger button with minimal markup and animate the interactions.
A Pen by Caley Jack on CodePen.
%body | |
%a.menu-trigger | |
%span Menu |
$('.menu-trigger').on 'click', -> | |
$(@).toggleClass 'active' |
@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 |