Apple.com 汉堡包菜单

当Apple 发布更新后的网站时，引起了不小的轰动，其中包括一个全新的响应式导航。虽然重新设计主要关注其他方面，但有一点很突出，那就是在重新设计的响应式导航中使用了 汉堡包菜单图标。而且，不仅仅是普通的汉堡包，而是一个素食汉堡——只有面包。这可能是对简约的一种表达，或者其他什么，但以下是如何使用相同的动画效果来重新创建它，该效果将图标从汉堡包转换为×。

以下代码假定使用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');
});

查看CodePen上的CSS-Tricks的笔 Apple的汉堡包菜单 (@css-tricks)。

其他示例

如果您对带线条的菜单图标的其他示例感兴趣，可以在 CodePen上浏览大量集合。