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:

Visualizza il codice attuale

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 $iesimo 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.

Risultato finale

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.