Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)
Questo tutorial vi insegnerà come creare e animare un'icona di menu hamburger e poi allegare un listener di eventi tramite jQuery per l'innesco di un menu a discesa.
Userò Jade (Pug) e Sass invece di HTML e CSS vaniglia. Così dovreste avere almeno una conoscenza di base di questi motori di templating.
Creazione del terreno di gioco
Inizieremo con l'implementazione di un semplice terreno di gioco. Fornirò solo il template di Jade insieme agli stili Sass, poiché questo non è lo scopo dell'esercitazione. Potete prenderlo e utilizzarlo o potete venire con il vostro progetto.
File di Jade:
body #container #header #body .content .left .right - for (i=1; i <= 5 ; i++ ) div( id="text" + i ) .content .left .right - for (j=6; j <= 10 ; j++ ) div( id="text" + j ) .content .left .right - for (k=11; k <= 15 ; k++ ) div( id="text" + k )
File di Sass:
=flex() display: -webkit-box display: -moz-box display: -ms-flexbox display: -webkit-flex display: flex =transition($time) -webkit-transition: all $time ease -moz-transition: all $time ease -ms-transition: all $time ease -o-transition: all $time ease transition: all $time ease html, body margin: 0 padding: 20px 0 +flex() justify-content: center //----------------------------------// #container width: 320px height: 550px background-color: #ebebeb overflow: hidden #header height: 45px background-color: #9b9b9b position: relative #body padding: 0 20px padding-top: 40px +flex() flex-direction: column justify-content: flex-start .content +flex() flex-direction: row justify-content: flex-start margin-bottom: 25px .left width: 100px height: 100px margin-right: 15px background-color: #e1e1e1 .right @for $i from 1 through 15 #text#{$i} margin-top: 10px width: 50 + random(100) + px height: 10px background-color: #e1e1e1
Nota: Qui ho creato due mixin denominati flex
e transition
. I mixin rendono più facile riutilizzare alcune regole CSS raggruppandole. Ogni volta che ho bisogno di aggiungere display: flex
con tutti i vendor prefix, posso solo usare +flex()
invece, grazie ai mixin.
Useremo questa struttura e la svilupperemo per il resto del tutorial.
Il risultato finale dovrebbe assomigliare a questo:

Icona di menu hamburger
Ora è il momento di creare un semplice e ancora attraente menu hamburger e animarlo con il CSS.
Aggiungete un nuovo div all'interno di #header
e nominatelo #hamburger
. Quindi create due div figli all'interno di #hamburger
. Essi dovrebbero avere una classe comune e singoli ID.
#hamburger .strip#top .strip#bottom
Ora abbiamo bisogno di dare uno stile al div genitore #hamburger
e ai div figli con la classe comune .strip
.
#hamburger height: 100% width: 45 +flex() flex-direction: column justify-content: space-between padding-left: 20px
Impostiamo l'altezza del div uguale al suo div genitore, che è #header
, definendo height: 100%
. Inoltre, abbiamo impostato un valore di larghezza per questo elemento div genitore che definirà la sua regione "cliccabile".
Successivamente, aggiungiamo flexbox con tutti i prefissi dei vendor utilizzando i mixin, che abbiamo creato in precedenza.
Poiché vogliamo che i nostri div .strip
siano posizionati verticalmente, impostiamo flex-direction: column
, quindi usate justify-content: space-between
al fine di mettere lo spazio tra i div .strip
.
Quindi abbiamo bisogno di spingere quei div verso gli altri aggiungendo bottom e top padding ai rispettivi div.
#top margin-top: 17px #bottom margin-bottom: 17px
Abbiamo anche aggiunto padding-left: 20px
al fine di spostare i div .strip
più a destra.
La prossima cosa è dare uno stile alle strisce. Questo è relativamente facile, definendo solo la dimensione e il colore dei div.
.strip width: 25px height: 2px background-color: #ffffff
Il risultato finale dell'icona di menu hamburger dovrebbe assomigliare a questo:

La prossima cosa è animare l'icona del menu, in modo che quando questo viene selezionato, dovrebbe animarsi in un segno a croce.
Animare l'icona di menu hamburger
A questo punto, ci accingiamo a utilizzare del jQuery di base per attivare o disattivare alcune classi CSS.
Creiamo prima le classi CSS che devono essere attivate o disattivate.
Ci accingiamo a utilizzare le impostazioni translate e rotate della proprietà transform
di CSS insieme alla proprietà transition
.
In primo luogo, aggiungete le transizioni per i div #top
e #bottom
utilizzando i mixin con un parametro temporale specifico.
#top margin-top: 17px +transition(.25s) #bottom margin-bottom: 17px +transition(.25s)
Ora abbiamo bisogno di definire lo stile delle classi da attivare o disattivare.
Ruoteremo e trasleremo ogni div .strip
individualmente, quindi abbiamo bisogno di attivare e disattivare classi diverse per i div #top
e #bottom
.
#top margin-top: 17px +transition(.25s) &.topRotate transform-origin: center transform: translateY(4px) rotateZ(45deg) #bottom margin-bottom: 17px +transition(.25s) &.bottomRotate transform-origin: center transform: translateY(-5px) rotateZ(-45deg)
Qui abbiamo definito lo stile per due diverse classi denominate .bottomRotate
e .topRotate
, che saranno aggiunte e rimosse dai loro rispettivi div di riferimento, #top
e #bottom
.
Notate che il diverso ridimensionamento della classe .strip
comporterebbe la necessità di valori diversi di translateY
e rotateZ
per animare un segno di croce corretto.
Disattivare la classe con jQuery
Abbiamo definito come ogni div .strip
si animerà quando sono presenti le classi topRotate
e bottomRotate
. Tuttavia, dobbiamo ancora allegare un listener di eventi per attivare o disattivare tali classi.
Create un nuovo file JavaScript e utilizzate il codice seguente per attivare o disattivare le classi topRotate
e bottomRotate
dei div con gli ID rispettivamente #top
e #bottom
.
$(document).ready(function(){ $("#hamburger").click(function(){ $("#top").toggleClass("topRotate"); $("#bottom").toggleClass("bottomRotate"); }); })
Abbiamo messo tutto il nostro codice all'interno di $(document).ready(function(){})
per attendere che l'intera pagina si carichi prima di intraprendere qualsiasi azione.
Quando si clicca il div #hamburger
, attiveranno le classi per i div con gli ID specifici.
Nota: Non dimenticate di aggiungere il file di origine di jQuery nel vostro progetto.
Visualizzate il codice attuale
Creare l'elenco del menu
Il passo successivo è quello di creare un menu con voci di elenco.
Utilizzate la seguente struttura sotto #header
:
#dropDown #background ul li Home li Blog li Projects li Authors li Jobs li Contact
Quindi qui abbiamo usato il tag ul
come genitore per raggruppare gli elementi figli con tag li
. Inoltre, al fine di creare un'animazione di sfondo in espansione, abbiamo anche aggiunto un div con ID #background
.
Diamo prima uno stile agli elementi ul
e li
.
ul list-style: none padding: 0 margin: 0
Impostate list-style
su none
per rimuovere i punti elenco dagli elementi ul
e anche impostate sia padding
che margin
su 0 per rimuovere tutti i valori predefiniti.
Ora date uno stile agli elementi li
:
li //display: none background-color: #9b9b9b color: #ffffff font-family: 'Quicksand', sans-serif font-weight: lighter font-size: 15px padding: 20px padding-left: 60px &:after position: absolute content: '' left: 60px width: 60% height: 1px bottom: 4px background: rgba(255, 255, 255, 0.25) &:last-child:after width: 0
Qui ho commentato display: none
per poter vedere il risultato. Tuttavia, quando lo animate, lo useremo per nascondere inizialmente gli elementi di elenco.
Ho anche aggiunto lo pseudo-elemento after
e dato uno stile di conseguenza al fine di separare ogni elemento li
con una linea retta. :last-child:after
rimuove questa riga per l'ultimo elemento li
.
Visualizzate il codice attuale
L'animazione dell'elenco del menu
Ora ci accingiamo a utilizzare alcune direttive di controllo Sass per aggiungere le animazioni con fotogrammi chiave CSS con diversi attributi per ogni elemento li
.
@keyframes drop 0% opacity: 0 transform: scale(1.3) 100% opacity: 1 transform: scale(1) @keyframes fold 0% opacity: 1 transform: scale(1) 100% opacity: 0 transform: scale(0.7)
Qui abbiamo definito le nostre animazioni con fotogrammi drop
e fold
.
drop
serve ad animare l'apertura della lista del menu. La scala iniziale è più del 30%, e si riduce fino alle dimensioni originali poiché la trasparenza va da 0 a 1. L'azione opposta si svolge in fold
.
Ora abbiamo bisogno di collegare i fotogrammi chiave agli elementi li
. Questa parte è dove Sass si rivela utile.
@for $i from 1 through 6 li:nth-child(#{$i}) animation: name: fold duration: 80ms*(6-$i) + 1ms timing-function: ease-in-out fill-mode: forwards li.anim:nth-child(#{$i}) animation: name: drop duration: 100ms*$i timing-function: ease-in-out fill-mode: forwards
Qui ho utilizzato un ciclo for che va da 1 a 6 con l'indice $i
.
Ora abbiamo bisogno di utilizzare questo indice per collegare ogni animazione agli elementi li
con durate diverse.
In primo luogo, considerate la riga di li.anim:nth-child(#{$i})
.
Qui ci stiamo prendendo il figlio $i
esimo dell'elemento li
con la classe anim
.
Attiveremo e disattiveremo questa classe anim
. Così, quando viene aggiunto agli elementi li
, l'animazione del fotogramma chiave con il nome drop
entrerà in azione. Quando viene rimosso, l'animazione fold
entrerà in azione.
La prossima cosa importante è l'attributo duration
.
duration: 100ms*$i
per l'animazione drop
estenderà la durata dell'animazione per ogni incremento del numero figlio. Così, quando questo codice viene compilato, il primo figlio di li
avrà duration: 100ms
, e l'ultimo figlio avrà duration: 600ms
.
Questo vi darà la sensazione di animare ogni elemento uno dopo l'altro.
Facciamo la stessa cosa per l'animazione fold
. Questa volta, l'ultimo elemento dovrebbe essere animato più velocemente, quindi duration: 80ms*(6-$i) + 1ms
. Il 1ms aggiunto alla durata è dovuto al fatto che quando si imposta la durata su 0, è probabile che si verifichino alcuni problemi, e l'animazione potrebbe non funzionare correttamente.
Quando stavamo dando uno stile all'elemento li
, ho detto che dovevamo utilizzare display: none
per evitare indesiderati mentre giocavamo con l'animazione. Se non lo impostate su none
, vedrete che l'animazione fold
viene riprodotta una volta quando la pagina viene caricata.
Se impostiamo la proprietà display
su none
, non lo vedremo, e quindi abbiamo bisogno di mostrare l'elemento li
prima di attivare e disattivare la classe anim
.
Vogliamo che le nostre animazioni si riproducano quando si clicca sull'icona hamburger. Quindi utilizziamo un po' di jQuery per impostare la proprietà display
di ciascun elemento li
a block
e attivare o disattivare anche la classe anim
.
$(document).ready(function(){ $("#hamburger").click(function(){ $("#top").toggleClass("topRotate"); $("#bottom").toggleClass("bottomRotate"); $("li").show(); $("li").toggleClass("anim"); }); })
Visualizzate il codice attuale
Noterete che possiamo vedere l'animazione di ogni elemento li
singolarmente. Tuttavia, avremmo piuttosto una sensazione di espansione del menu.
Per risolvere questo problema, dobbiamo semplicemente espandere l'altezza di un div. Quel div è #background
, che abbiamo inizialmente aggiunto quando si creavano gli elementi ul
e li
.
#background width: 100% height: 0 background-color: #9b9b9b position: absolute +transition(.45s) &.expand height: 550px
Attiveremo e disattiveremo la classe expand
per impostare l'attributo height
a 550px
a .45s
. Si noti che ho usato il mixin transition
per definire la transizione con un parametro di tempo specifico.
Conclusione
In tutto questo tutorial, abbiamo fatto pratica su come utilizzare i cicli all'interno di HTML e CSS tramite i motori di templating Jade e Sass. Come se non bastasse, abbiamo creato animazioni con fotogrammi chiave CSS e li abbiamo collegati con attributi di diversa durata a elementi HTML specifici. Poi abbiamo attivato classi con jQuery per controllare tali animazioni.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post