Apple Hamburger Bun Menu - Preview
HTML
<div class="container">
<button class="hamburger">
<span class="hamburger__top-bun"></span>
<span class="hamburger__bottom-bun"></span>
</button>
</div>
LESS
.container {
position: relative;
background: rgba(0,0,0,0.95);
width: 100%;
height: 80px;
}
.hamburger {
position: absolute;
top: 15px;
left: 15px;
background: none;
width: 48px;
height: 48px;
border: none;
cursor: pointer;
transition: all 0.25s;
z-index: 100001;
}
.hamburger:hover [class*="-bun"] {
background: #888;
}
.hamburger__top-bun,
.hamburger__bottom-bun {
position: absolute;
left: 15px;
display: block;
background: #FFF;
width: 18px;
height: 1px;
transition: all 0.25s;
transform: rotate(0);
}
.hamburger__top-bun {
top: 23px;
transform: translateY(-3px);
}
.hamburger__bottom-bun {
bottom: 23px;
transform: translateY(3px);
}
/* When JavaScript trigger the button */
.hamburger.open {
transform: rotate(90deg);
}
.hamburger.open .hamburger__top-bun {
transform: rotate(45deg) translateY(0);
}
.hamburger.open .hamburger__bottom-bun {
transform: rotate(-45deg) translateY(0);
}
JAVASCRIPT
$(function(){
$('.hamburger').on('click', function() {
$(this).toggleClass('open');
});
});
1 Response