È 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/
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
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
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)
e per finire button e article. Grazie alle icone di fontAwesome possiamo trattare la nostra icona come fosse semplice testo.
Il risultato che abbiamo ottenuto è quello in figura
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.
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
E il gioco è fatto.
Per scaricare le slide segui questo link.
Ancora nessun commento