Apple ha fatto un po 'di rumore quando ha rilasciato un sito aggiornato, inclusa una nuovissima navigazione reattiva. Mentre la riprogettazione si è concentrata su altre cose, una cosa che è emersa è stato l'uso di un'icona del menu hamburger in una navigazione reattiva di nuova concezione. E non un hamburger qualsiasi, uno senza carne, solo i panini. Potrebbe essere un'affermazione sulla semplicità o altro, ma ecco come possiamo ricrearla con lo stesso effetto animato che trasforma l'icona da hamburger a ×.
Il codice seguente presuppone l'uso di autoprefixer.
.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'); ));Vedi il menu Hamburger Buns di Pen Apple di CSS-Tricks (@ css-tricks) su CodePen.
Altri esempi
Se sei interessato ad altri esempi di un'icona di menu a righe, c'è una grande raccolta su CodePen che puoi sfogliare.