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.

1. COME
COSTRUIRE UN
BURGER
BUTTON
EFFICACE
docente Simone Baldassin

2. 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.

3. 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/
Prendiamo la versione 3.2.1 e copiamo il link
prima della chiusura del body del nostro
esercizio.

4. 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

5. 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

6. 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)

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

8. Il risultato che abbiamo ottenuto è quello in
figura

9. 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.

10. 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.

11. L’effetto finale che andremmo a ottenere una
volta cliccato il pulsante sarà quello che
possiamo vedere in figura
E il gioco è fatto.

12. continua la tua formazione su
www.venetoformazione.it/blog