Just another good old burger button.
A Pen by Nathan Jacobs on CodePen.
Just another good old burger button.
A Pen by Nathan Jacobs on CodePen.
main | |
.hamburger | |
.bun | |
.bacon | |
.lettuce | |
.tomato |
(function($){ | |
$(function(){ | |
var hamburger = $('div.hamburger'); | |
hamburger.on('click', function(){ | |
hamburger.toggleClass('active'); | |
}); | |
}); | |
})(jQuery); |
$mustard: rgba(200, 180, 0, 0.7); | |
$ketchup: rgba(180, 0, 0, 0.8); | |
$sesame-seed: rgba(255, 235, 150, 0.9); | |
html { | |
font-size: 10px; | |
} | |
main { | |
position: fixed; | |
top: 0; right: 0; bottom: 0; left: 0; | |
background: $mustard; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.hamburger { | |
position: relative; | |
padding: 3rem 2rem; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.active { | |
.bacon { | |
transform: rotateZ(-45deg) translate3d(-2.2rem, 2.1rem, 0); | |
background: $sesame-seed; | |
} | |
.lettuce { | |
opacity: 0; | |
} | |
.tomato { | |
transform: rotateZ(45deg) translate3d(-2.2rem, -2.1rem, 0); | |
background: $sesame-seed; | |
} | |
.bun { | |
opacity: 1; | |
} | |
} | |
.bacon, | |
.lettuce, | |
.tomato { | |
position: relative; | |
margin: 1rem 0; | |
width: 12rem; | |
height: 2rem; | |
background: $ketchup; | |
border-radius: 1rem; | |
transition: all 250ms ease-out; | |
} | |
.bun { | |
position: absolute; | |
opacity: 0; | |
top: 0; | |
left: 0; | |
height: 16rem; | |
width: 16rem; | |
border-radius: 50%; | |
background: $ketchup; | |
transition: opacity 250ms ease-out; | |
} | |
.bacon { | |
z-index: 2; | |
} | |
.lettuce { | |
z-index: 1; | |
} | |
.tomato { | |
z-index: 3; | |
} | |
.bun { | |
z-index: 0; | |
} |