Išleidę atnaujintą svetainę, „Apple“ sukėlė triukšmą, įskaitant visiškai naują reaguojančią navigaciją. Nors pertvarkymas buvo sutelktas į kitus dalykus, vienas dalykas, kuris įstrigo, buvo hamburgerio meniu piktogramos naudojimas naujai sukurtoje reaguojančioje navigacijoje. Ir ne bet koks mėsainis, vienas be mėsos - tik bandelės. Tai gali būti teiginys apie paprastumą ar bet ką, bet štai kaip mes galime jį atkurti naudodami tą patį animuotą efektą, kuris paverčia piktogramą iš mėsainio į ×.
Šiame kode daroma prielaida, kad naudojamas automatinis pataisymas.
.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'); ));Peržiūrėkite „Pen Apple“ „Hamburger Buns“ meniu, kurį sukūrė CSS-Tricks (@ css-tricks) „CodePen“.
Kiti pavyzdžiai
Jei jus domina kiti brūkšninio meniu piktogramos pavyzdžiai, „CodePen“ yra didelė kolekcija, kurią galite naršyti.
