Apple a făcut ceva zgomot când a lansat un site actualizat, incluzând o nouă navigație receptivă. În timp ce reproiectarea a fost axată pe alte lucruri, un lucru care a ieșit din afară a fost utilizarea unei pictograme de meniu hamburger într-o navigare receptivă nou proiectată. Și, nu orice hamburger, unul fără carne - doar chiflele. Ar putea fi o afirmație privind simplitatea sau orice altceva, dar iată cum o putem recrea cu același efect animat care transformă pictograma dintr-un hamburger în ×.
Următorul cod presupune utilizarea autoprefixerului.
.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'); ));Vedeți meniul Pen Apple's Hamburger Buns de la CSS-Tricks (@ css-tricks) pe CodePen.
Alte exemple
Dacă sunteți interesat de alte exemple de pictograme de meniu, există o mare colecție pe CodePen pe care o puteți răsfoi.