Barra di navigazione con indicatore a scorrimento fluido

Ciao! Nel video tutorial di oggi, realizzeremo una

Barra di navigazione con un indicatore a scorrimento fluido

Struttura di base Html e Css.

Continuiamo con le impostazioni di base, e rimuoviamo il tag h1 di prova.

La struttura di base della nostra barra di navigazione, è composta da un div con classe navigation, con all’interno un elenco non ordinato( tag <ul> ), con 5 elementi ( tag <li> ).

All’interno di ogni list-item ( <li> ), inseriamo un ancora ( tag <a> ), per il momento con destinazione fittizia ( href=”#” ), e due span: uno per l’icona con classe icon, e uno per il testo con classe text.

Inseriamo le icone, caricandole dal sito ionic.io

Assegniamo al nostro ul, una larghezza di 350px, in modo che rientri all’interno della barra navigation, che ha una larghezza di 400px, e poi gli diamo un display:flex, per disporre gli elementi orizzontalmente.

Stilizziamo gli item ( tag <li> ) e le ancore ( tag <a> )

Stilizziamo le icone e la transizione di movimento al posizionamento del mouse su di esse (hover)

Stilizziamo il testo e la transizione di movimento al posizionamento del mouse su di esso (hover)

A questo punto, possiamo creare il nostro indicatore!

Adesso grazie ad :after e :before, pseudo elementi CSS, inseriamo due contenitori fittizi, cioè non presenti nel codice html.

Posizioneremo i due elementi fittizi, uno a destra e l’altro a sinistra del nostro indicatore, per ottenere l’effetto di smussatura e di fluidità che vedremo durante il movimento.

A questo punto, siamo pronti per realizzare il movimento fluido dell’indicatore!

Aggiungiamo la classe active al primo tag <li>

Spostiamoci prima della chiusura del body, e aggiungiamo lo script che gestirà il movimento fluido dell’indicatore al click dell’utente sul tag <li>

Passiamo al CSS, e sostituiamo

:hover sul tag <li> per .text, e

:hover sul tag <li> per .icon, con

.active per entrambi.

Ad ogni elemento figlio di <li>, in base alla sua posizione, ogni qualvolta che sarà aggiunta la classe active, verrà traslato lungo l’asse X, dalla posizione corrente alla posizione del tag <li> dove farà click l’utente e al quale sarà aggiunta la classe active. L’indicatore si sposterà di 70px alla volta x 0 se il click avverrà sulla posizione 1 ; 70px x 1 se avverrà sulla posizione 2, 70px x 2 se sarà sulla posizione 3, e così via fino alla 5.

Ecco il risultato!

Bene! Abbiamo concluso questo video-tutorial sulla realizzazione di un barra di navigazione con indicatore a scorrimento fluido.

Per scaricare i file clicca sul tasto Download, e dopo decomprimi il file ZIP

Ecco il video-tutorial completo

---