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.