Apple.com Hamburger Bun Menu

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.