Apple je napravio malo buke kad su objavili ažuriranu web stranicu, uključujući potpuno novu responzivnu navigaciju. Iako je redizajn bio usredotočen na druge stvari, jedna stvar koja je zapinjala bila je upotreba ikone izbornika hamburgera u novo dizajniranoj responzivnoj navigaciji. I to ne bilo koji hamburger, bezmesni - samo lepinje. To bi mogla biti izjava o jednostavnosti ili što već, ali evo kako je možemo ponovno stvoriti s istim animiranim efektom koji ikonu pretvara iz hamburgera u ×.
Sljedeći kod pretpostavlja upotrebu autoprefiksera.
.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'); ));Pogledajte izbornik Hamburger peciva olovke Apple tvrtke CSS-Tricks (@ css-tricks) na CodePenu.
Ostali primjeri
Ako vas zanimaju drugi primjeri ikone s postavljenim izbornikom, na CodePenu postoji velika kolekcija koju možete pregledavati.