Ente accreditato Regione Veneto n.4271

Come costruire un burger button efficace

Creare un effetto divertente e diffuso al click dei nostri pulsanti mobile

Pubblicato da Simone // 3 agosto 2017 // 118 visualizzazioni

È Agosto e fa caldo, o perlomeno ci sono più di 30 gradi nel momento in cui scrivo questo articolo, quindi quale soluzione migliore che un bel tutorial estivo HTML da spiaggia per rinfrescarsi insieme a una granita?

In questo esercizio vediamo come creare un burger button che cambia forma al click, passando dalla classica icona che tutti ben conosciamo, a una semplice x nel momento in cui si apre e viceversa. Per farlo dobbiamo però prima installare nel nostro sito web la libreria di Fontawesome.

Se non ricordate come si fa vi rimando a questo articolo di qualche tempo fa.

Altro presupposto importante è caricare nel sito la libreria jQuery che possiamo installare sia fisicamente via file, sia tramite i CDN di Google da questo indirizzo:

https://developers.google.com/speed/libraries/

Burger Button

Prendiamo la versione 3.2.1 e copiamo il link prima della chiusura del body del nostro esercizio.

Andiamo ora a compilare il nostro HTML inserendo un marcatore header. Al suo interno prepariamo il nostro button usando l’icona con classe fa-bars e di seguito un marcatore nav con la lista elenco che conterrà il menù di navigazione come vediamo in figura a seguire

Burger Button

L’aggiunta del div article è puramente stilistica per poterci mostrare l’effetto a discesa che andremo a generare con jQuery.

A questo punto assegnamo la formattazione della nostra struttura, in primis header

Burger Button

poi il nav con il nostro menù (notiamo che il menù viene settato in display: none; questo valore è necessario perché non sia visibile se non al click sul pulsante)

Burger Button

e per finire button e article. Grazie alle icone di fontAwesome possiamo trattare la nostra icona come fosse semplice testo.

Burger Button

Il risultato che abbiamo ottenuto è quello in figura

Burger Button

Veniamo ora alla parte più “difficile” ovvero lo script che permetterà di rendere funzionante il tutto. Andiamo a inserirlo dopo il CDN di Google che implementa la libreria remota nel nostro progetto.

Burger Button

Applichiamo un evento click al nostro ID (#) burger che richiama il pulsante/icona dichiarando quindi che questo vada a far aprire con un effetto slideToggle l’elemento classe (.) nav. Allo stesso poi (this) dichiariamo di estrarre l’elemento discendente (.find) ovvero la classe principale i.fa, la nostra icona, e sostituiamo il pulsante fa-bars con il simbolo fa-times.

L’effetto finale che andremmo a ottenere una volta cliccato il pulsante sarà quello che possiamo vedere in figura

Burger Button

E il gioco è fatto.

 

Per scaricare le slide segui questo link.

Topic: , , ,

Send this to a friend