Apple aiheutti melua julkaistessaan päivitetyn sivuston, mukaan lukien täysin uusi reagoiva navigointi. Vaikka uudelleensuunnittelu keskittyi muihin asioihin, yksi asia, joka jäi kiinni, oli hampurilaisen valikkokuvakkeen käyttö hiljattain suunnitellussa reagoivassa navigoinnissa. Ja ei mitään hampurilaisia, lihattomia - vain pullia. Se voi olla lausunto yksinkertaisuudesta tai mistä tahansa, mutta näin voimme luoda sen uudelleen samalla animoidulla vaikutuksella, joka muuttaa kuvakkeen hampurilaisesta ×: ksi.
Seuraava koodi olettaa automaattisen korjauksen käytön.
.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'); ));Katso Kynän Applen Hamburger Buns -valikko CSS-Tricksiltä (@ css-tricks) CodePeniltä.
Muita esimerkkejä
Jos olet kiinnostunut muista esimerkkeistä viivoitetusta valikkokuvakkeesta, CodePenissä on iso kokoelma, jota voit selata.