Barra orizzontale con effetto hover in html5, css3 e bootstrap

Cosa ci serve?

Un server locale (ti ho già detto che uso Xampp)
·
UN editor di codice (usa il testo sublime 3)

Passo 1

Inizierò andando nella directory del mio server locale e creando una nuova cartella per archiviare questo progetto, la chiamerò "menu_hover" al suo interno e ne aggiungerò un'altra per contenere i file css.

INGRANDIRE

INGRANDIRE

Passo 2

Ora nel nostro editor di codice inizieremo aggiungendo una nuova struttura html5 alla quale aggiungerò i fogli di stile corrispondenti al bootstrap dai loro indirizzi CDN per non occupare spazio sul nostro server, aggiungerò anche un foglio di stile, chiamato "stile .css" che verrà archiviato nella nostra cartella "css" creata in precedenza…
Successivamente salveremo questo file come "menu.html" nella cartella "menu_hover" creata nel passaggio 1.

INGRANDIRE

Passaggio 3

Adesso aggiungeremo un'etichetta al nostro "menu.html" e stabiliremo come verrà visualizzato sullo schermo impostandone le proprietà nel file style.css…

INGRANDIRE

INGRANDIRE

Come vedrai nel css ho aggiunto un "colore di sfondo: verde" questo è solo a scopo di guida per vedere la dimensione e la posizione dell'intestazione sullo schermo, puoi giocare con le dimensioni, il carattere e altri in base al tuo preferenze … si in questo momento lo vediamo nel nostro browser avremmo qualcosa del genere …

INGRANDIRE

Passaggio 4

Voglio che il mio menu sia composto da 4 collegamenti, per ottenere ciò all'interno dell'etichetta ne aggiungerò 4Con la classe "box_menu" per identificarli aggiungerò ad ognuno un id crescente da "uno" a "quattro".

INGRANDIRE

Passaggio 5

Nel nostro file style.css aggiungeremo le proprietà per la classe "box_menu" e per i livelli "uno, due, tre e quattro".

Passaggio 6

Inizieremo a definire il comportamento della classe "box_menu" stabilendo una posizione relativa, ricordiamo che in questo caso avremo 4 collegamenti e che il livello che li contiene, cioè occupa l'80% dello schermo, quindi servono a 4 elementi con la classe box_menu occupano il 100% dello spazio disponibile al suo interno, per questo prenderemo il 100% e lo divideremo per il numero di collegamenti o elementi che vogliamo posizionare, come in questo caso ce ne sono 4 quindi sarebbe 100/4 = 25, quindi la nostra classe "box_menu" dovrebbe avere una larghezza del 25%. Daremo anche uno stop al 100% e gli diremo di fluttuare a sinistra in modo che gli elementi siano visti fianco a fianco.

INGRANDIRE

Passaggio 7

Successivamente definiremo il colore di sfondo con cui mostreremo ciascuno degli elementi, nel passaggio 4 aggiungiamo id da uno a quattro ora nel nostro css definiremo come apparirà ciascuno di questi livelli. per questo faremo quanto segue …

INGRANDIRE

Questo ci darà il seguente risultato:

INGRANDIRE

Come puoi vedere abbiamo già delimitato gli spazi di ogni elemento e il suo colore di sfondo, puoi usare i codici colore secondo i tuoi gusti, in questo caso non essendo un sito con un tema specifico ma un test ho usato questi come una dimostrazione …

Passaggio 8

Ebbene torniamo al documento "menu.html" come lo abbiamo lasciato nel passaggio 4, ora procederemo ad aggiungere le icone e il testo che avrà il nostro menu. Per questo non utilizzeremo immagini ma andremo per aiutarci un po' con bootstrap e Useremo le icone del pacchetto "Font Awesome", per questo andiamo al browser e accediamo al web https: // fortawesome… .o / Font-Awesome / clicchiamo su "Get start" ” e scendi alla sezione “FACILE: BootstrapCDN di MaxCDN ”.

INGRANDIRE

Copierò il collegamento CDN al foglio di stile Font Awesome e lo incollerò nell'intestazione del mio documento "menu.html"

INGRANDIRE

Con questo ora possiamo utilizzare le icone Font Awesome nel nostro design, ma ora dobbiamo scegliere quali icone posizionare, per questo torniamo al loro sito Web e individuiamo il menu "Icone".

INGRANDIRE

Cerchiamo nell'ampio elenco l'icona che ci interessa e clicchiamo su di essa.

INGRANDIRE

Quando clicchiamo, ci porterà in un'altra finestra in cui possiamo vedere il codice per inserire quell'icona nel nostro design.

INGRANDIRE

Lo copiamo semplicemente e andiamo al nostro "menu.html" e lo incolliamo nelcome segue …

INGRANDIRE

INGRANDIRE

Aggiungeremo anche un nome sotto di esso che è centrato …

INGRANDIRE

Controlliamo come appare nel nostro browser …

INGRANDIRE

Vediamo che abbiamo già aggiunto un'icona e un testo centrato, quindi ripetiamo questo passaggio per i restanti 3 elementi.

INGRANDIRE

Passaggio 9

Le icone sono piuttosto piccole, aumenterò le loro dimensioni 3 volte, per questo aggiungerò una classe "fa-3x".

INGRANDIRE

INGRANDIRE

Passaggio 10

Adesso modificherò un po' il file css per completare l'effetto, inizierò modificando la classe "box_menu" allineando il testo al centro e dandogli un display = "block";

INGRANDIRE

Passaggio 11

Successivamente scriverò una classe per controllare come appariranno le icone, in cui definirò che sono visualizzate in bianco, che hanno un bordo arrotondato intorno a loro e che hanno un'animazione di transizione …

INGRANDIRE

Passaggio 12

Per quanto riguarda i testi sull'etichetta

Li metterò in bianco e ridurrò un po' l'opacità aggiungendo anche un leggero effetto di animazione verso il basso.

INGRANDIRE

Passaggio 13

Ora definirò come si comporteranno i nostri elementi al passaggio del mouse su di esso e aggiungerò una piccola animazione per ammorbidire l'effetto.

INGRANDIRE

Fatto ciò possiamo dire che abbiamo finito di disegnare l'effetto, ora non ci resta che aggiungere i link nel modo desiderato, commento che questo effetto può essere utilizzato anche per posizionare immagini che hanno del testo descrittivo sotto di loro, come Ad esempio, un portfolio professionale, una galleria o un catalogo prodotti, tutto è lasciato alla tua immaginazione…
Alla fine Ti lascio un .zip con il codice sorgenteSe ti è piaciuto questo tutorial, lascia il tuo commento, se c'era qualcosa che non ti era chiaro chiedi pure, se desideri un tutorial su un argomento specifico, fammi sapere…
Spero di esserti stato utile, saluti…

File con codice sorgente… Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo