Come costruire un burger button efficace

3 Agosto 2017 Simone Baldassin sviluppo, web

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

2 commenti

Salve, premetto che non sono una persona esperta di html ecc..
ho provato copiare il codice delle immagini, ma mi da errore a questa riga:

$(document).ready(function() {

Credo devo cambiare la parola “document” ma non sono sicuro…
Poi ho avuto difficolta aprendo il link per scaricare la libreria.. (non so avendo aperto il link dove cliccare).

Se potete contattatemi, magari do un piccolo contributo per il disturbo. Grazie Mille.

Ciao Stefano,
il problema non credo sia “document” (è corretto quello), piuttosto credo derivi dal fatto che non hai caricato prima la libreria jQuery. Non avendo maggiori info sull’errore vado alla cieca ma secondo me è quello il problema

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *