Ciao a tutti.
Bentornato ad un'altra revisione del codice.
In precedenza, ho creato una barra di navigazione che funzionava verticalmente.
E' andata su e giù.
Oggi voglio solo mostrarti come puoi usare lo stesso codice HTML ma
creare una barra di navigazione orizzontale, invece.
Allora, diamo un'occhiata.
Voglio andare a qualcosa che assomigli un po' piu' a questo.
E, non solo sono andato a una barra di navigazione orizzontale, voglio mostrarti
un esempio di mostrare quale pagina è quella che stiamo guardando attualmente.
Quindi, se noti, nella barra di navigazione,
il link delle foto sembra un po 'diverso dagli altri.
È molto comune farlo per indicare alle persone che
questa è la pagina che stai guardando in questo momento.
Quindi diamo un'occhiata al CSS e vediamo come ho preso un semplice HTML e l'ho
trasformato in qualcosa in cui ho una barra di navigazione ben arredata.
Va bene, iniziamo dicendo, sai una cosa?
Vogliamo creare uno stile a tutti i collegamenti che si trovano nella barra di navigazione.
Non voglio stile tutti i collegamenti, invece,
voglio indicare solo i collegamenti che si trovano all'interno di nav.
E una volta fatto questo, è stato abbastanza semplice per me andare avanti e mettere dentro che voglio
una certa altezza, un certo colore di sfondo, una certa decorazione di testo.
Una delle cose che ho aggiunto qui è un raggio di bordo. Il
raggio del bordo curva le scatole, quindi
se guardi, tutto è un po' curvo qui lungo il lato.
Non c'e' niente di troppo importante qui.
La prossima cosa che ho,
quella nuova, è questa idea di avere una classe chiamata corrente.
Quello che fa la classe corrente, è fondamentalmente un modo di tagging.
Ehi, sai tutti i diversi link che ci sono sulla mia pagina?
Voglio mostrarti quale sto guardando in questo momento.
E tutto quello che ho fatto qui è andato e l'ho impostato in
modo da avere un colore di sfondo diverso.
Va bene.
Quindi, è stato abbastanza semplice creare questa
barra di navigazione orizzontale finché si è molto attenti a spaziare le cose.
Quindi, ancora una volta, voglio solo mostrarti che cose come imbottitura e
margine sono molto importanti e sono molto additivi.
Quindi, quando usi percentuali, invece dei pixel, impedirà di essere
che sembra bene su un grande schermo e poi davvero male su uno schermo piccolo.
L' ultima cosa, che tipo di mettere qui solo per divertirmi e per
aiutarti a mostrarti di nuovo alcune delle diverse cose che puoi fare con i CSS,
è che ho aggiunto uno stato hover per uno qualsiasi dei miei collegamenti di navigazione.
Quindi, se dai un'occhiata, sono entrato qui e
ho detto che quando qualcuno passa sopra la pagina, voglio cambiare il colore del testo
e voglio sbarazzarmi di tutta la cosa del raggio di confine.
Quindi diamo un'occhiata.
Vai qui, passerò sopra le ricette e
il testo viene trasformato da bianco a nero, ed è passato da cerchio a quadrato.
Ora di nuovo, esaminando tutti questi diversi esempi con voi, è davvero
importante che vi rendiate conto che non sono un artista, e non sono molto artistico.
E spero che tu possa prendere questi frammenti di codice e
trasformarlo in qualcosa che sembra davvero fantastico e personalizzato per
la pagina che stai cercando di creare.
Quindi vai avanti, divertiti un po ', e ora prova a creare una barra di navigazione
che va in tutti i modi diversi, su e giù, lateralmente, o anche combinazioni.
Buona fortuna.