Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Jade
Code

Creazione di un Menu a discesa pagine per dispositivi mobili

by
Difficulty:IntermediateLength:MediumLanguages:

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:

File di Sass:

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:

Playground

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.

Ora abbiamo bisogno di dare uno stile al div genitore #hamburger e ai div figli con la classe comune .strip.

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.

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.

Il risultato finale dell'icona di menu hamburger dovrebbe assomigliare a questo:

Hamburger Menu Icon

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.

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.

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.

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:

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.

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:

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.

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.

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.

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.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.