Apple machte einige Geräusche, als eine aktualisierte Website veröffentlicht wurde, einschließlich einer brandneuen reaktionsschnellen Navigation. Während sich das Redesign auf andere Dinge konzentrierte, war eine Sache, die auffiel, die Verwendung eines Hamburger-Menüsymbols in einer neu gestalteten reaktionsschnellen Navigation. Und nicht irgendein Hamburger, sondern ein fleischloser - nur die Brötchen. Es könnte eine Aussage zur Einfachheit oder was auch immer sein, aber so können wir sie mit demselben animierten Effekt neu erstellen, der das Symbol von einem Hamburger in ein × verwandelt.
Der folgende Code setzt die Verwendung von Autoprefixer voraus.
.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 das Hamburger Brötchen-Menü von Pen Apple mit CSS-Tricks (@ css-Tricks) auf CodePen.
Andere Beispiele
Wenn Sie an anderen Beispielen für ein liniertes Menüsymbol interessiert sind, gibt es auf CodePen eine große Sammlung, die Sie durchsuchen können.