Apple made some noise when they released an updated site, including an all-new responsive navigation. While the redesign was focused on other things, one thing that stuck out was the use of a hamburger menu icon in a newly designed responsive navigation. And, not just any hamburger, a meatless one—just the buns. It could be a statement on simplicity or whatever, but here’s how we can recreate it with the same animated effect that transforms the icon from a hamburger to an ×.
The following code assumes the use of autoprefixer.
.hamburger {
cursor: pointer;
position: absolute;
width: 48px;
height: 48px;
transition: all 0.25s;
}
.hamburger__top-bun,
.hamburger__bottom-bun {
content: '';
display: block;
position: absolute;
left: 15px;
width: 18px;
height: 1px;
background: #fff;
transform: rotate(0);
transition: all 0.25s;
}
.hamburger:hover [class*="-bun"] {
background: #999;
}
.hamburger__top-bun {
top: 23px;
transform: translateY(-3px);
}
.hamburger__bottom-bun {
bottom: 23px;
transform: translateY(3px);
}
.open {
transform: rotate(90deg);
}
.open .hamburger__top-bun {
transform:
rotate(45deg)
translateY(0px);
}
.open .hamburger__bottom-bun {
transform:
rotate(-45deg)
translateY(0px);
}
$('.hamburger').click (function(){
$(this).toggleClass('open');
});
See the Pen Apple’s Hamburger Buns Menu by CSS-Tricks (@css-tricks) on CodePen.
Other Examples
If you’re interested in other examples of a lined menu icon, there is a big collection on CodePen you can browse.
unfortunately this does not work in safari 8.0.6 on yosemite.
and in chrome the x lines don’t cross in the middle but slightly lower
Thanks for this post