Az Apple némi zajt hallott, amikor kiadott egy frissített oldalt, beleértve egy teljesen új, adaptív navigációt. Míg az újratervezés más dolgokra összpontosult, az egyik dolog megakadt, hogy egy hamburger menü ikont használtak egy újonnan tervezett, érzékeny navigációban. És nem akármilyen hamburger, hús nélküli - csak a zsemle. Lehet kijelentés az egyszerűségről vagy bármi másról, de a következőképpen állíthatjuk elő újra ugyanolyan animációs effektussal, amely az ikont hamburgerből × -sé alakítja.
A következő kód feltételezi az autoprefixer használatát.
.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'); ));Lásd a Pen Apple Hamburger Buns menüjét a CSS-Tricks-től (@ css-tricks) a CodePen-en.
Egyéb példák
Ha érdekel a vonalas menüikon más példája, a CodePen-en van egy nagy gyűjtemény, amelyet böngészhet.