Apple tegi ajakohastatud saidi, sealhulgas täiesti uue reageeriva navigeerimise avaldades müra. Ehkki ümberkujundamine oli keskendunud muudele asjadele, jäi üks asi hamburgeri menüüikooni kasutamisele värskelt kujundatud tundlikus navigeerimisel. Ja mitte ükski hamburger, lihavaba - lihtsalt kuklid. See võib olla avaldus lihtsuse või muu kohta, kuid siin on, kuidas saame selle uuesti luua sama animeeritud efektiga, mis muudab ikooni hamburgerist × -ks.
Järgmine kood eeldab automaatse parandaja kasutamist.
.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'); ));Vaadake CodePenist CSS-Tricks (@ css-tricks) Pen Apple'i menüüd Hamburger Buns.
Muud näited
Kui olete huvitatud joondatud menüüikooni muudest näidetest, on CodePenis suur kollektsioon, mida saate sirvida.