Apple.com Hamburger-Menü

Apple sorgte für Aufsehen, als sie eine aktualisierte Website veröffentlichten, einschließlich einer komplett neuen responsiven Navigation. Während sich die Neugestaltung auf andere Dinge konzentrierte, fiel eine Sache auf: die Verwendung eines Hamburger-Menü-Icons in einer neu gestalteten responsiven Navigation. Und nicht irgendein Hamburger, ein fleischloser – nur die Brötchen. Es könnte ein Statement für Einfachheit sein oder was auch immer, aber hier ist, wie wir es mit demselben animierten Effekt nachbilden können, der das Icon von einem Hamburger in ein × verwandelt.

Der folgende Code geht von der Verwendung von Autoprefixer aus.

.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');
});

Siehe den Pen Apple’s Hamburger Buns Menu von CSS-Tricks (@css-tricks) auf CodePen.

Weitere Beispiele

Wenn Sie an anderen Beispielen für ein liniertes Menü-Icon interessiert sind, gibt es eine große Sammlung auf CodePen, die Sie durchsuchen können.