Ciao, bentornato.
Indovina cosa?
Faremo un'altra, e la
nostra ultima barra di navigazione insieme, in questa recensione del codice.
Questo, però, è un po 'diverso, non solo per
il modo in cui abbiamo impostato le cose, ma perché voglio parlarvi
dell'accessibilità di quante persone creano le loro barre di navigazione.
Il nuovo modo,
che ho usato in questo modo, è creare i tuoi collegamenti di navigazione come parte degli elenchi.
Quindi potete vedere, abbiamo gia' un po' diverso qui.
Ho una lista non ordinata con uno, due, tre, quattro a voci di elenco, e
alcuni di questi elementi di elenco hanno elenchi non ordinati stessi.
Quindi, mentre questo è molto comune,
ci sono alcuni problemi di usabilità, quando ti rendi conto, queste sono davvero liste?
Perché in caso contrario, questo è un tag semantico che stiamo usando, che potremmo voler evitare.
Ma e' cosi' comune che voglio mostrartelo e lasciarti giocare e
prendere le tue decisioni.
L' altro problema quando facciamo questa barra di navigazione a discesa,
ha a che fare con l'accessibilità delle persone che sono in grado di passare il
mouse su alcune cose che si desidera attivare.
Penso che siamo stati tutti lì, quando siamo stati in una pagina web e
stiamo cercando di passare il mouse su qualcosa per fare clic su un link.
E continua a saltare via perché la nostra mano è troppo traballante o
dobbiamo passare sopra tre cose allo stesso tempo.
Quindi ancora una volta, mentre questa è una tecnica che voglio condividere con
voi e aiutarvi a capire, spero che vi assicurerete che tutte le applicazioni che fate,
fate del vostro meglio per assicurarvi che sia il più accessibile possibile.
Quindi di nuovo, iniziamo con questo semplice, tipo di noioso codice HTML, e
vediamo se non riusciamo a farlo sembrare qualcosa di un po 'più eccitante.
Quello che abbiamo qui ora è una barra di navigazione orizzontale
che avrà elementi a discesa.
Quindi, quando vado oltre Casa, non c'è niente in più da vedere, ma, quando vado oltre
Immagini, si può vedere che ho tre link aggiuntivi che posso provare a fare, e
lo stesso con Ricette, e Contatto, ancora una volta, è tutto da solo.
Allora, come ho fatto?
Come ho fatto a farlo in modo che il 2015, il 14 e il 13 non si presentino a meno che non sia in bilico?
E lo stesso con le ricette?
Diamo un'occhiata.
Va bene, saltero' il corpo nella navigazione
perche' penso che tu sappia come fare tutto questo.
Invece, parliamo delle diverse liste stesse.
Mi dispiace, elencare gli elementi stessi nei link.
Quindi quello che ho fatto è che sono entrato qui, in modo
che possiate vedere entrambi allo stesso tempo.
Ed è molto debole, e vorrei aver fatto un colore diverso ora.
Ma ho un confine tra ognuna di queste opzioni.
Ora,
mi sarebbe sembrato un po' strano avere un confine proprio qui lungo il lato.
Quindi quello che dovevo fare e' andarmene e dissi che sai una cosa?
Per quell'ultima voce della lista, l'ultima, non mettiamo un bordo in.
Sono quei piccoli ritocchi che puoi inserire nel tuo codice
per farlo sembrare un po 'più professionale.
Inoltre, non vogliamo confini con gli oggetti secondari, giusto?
Perche' non c'e' niente.
Dato che sono bloccati, non abbiamo bisogno di confini sul lato.
Allora, ho fatto la stessa cosa qui, dove ho detto, sai una cosa?
Non voglio usare nessun confine qui.
Piuttosto semplice, spero.
Ora, guardiamo di nuovo.
Ho fatto uno stile semplice sui miei collegamenti di navigazione, va bene?
L' unica cosa che ho inserito è, ancora una volta,
volevo mostrarvi un esempio di utilizzo della transizione.
La transizione qui è ciò che cambia lentamente il colore quando si passa il mouse,
piuttosto che una modifica rapida.
Quindi puoi vedere, e' un po' piu' graduale che improvviso, ok?
L' attivo è proprio come l'ultima volta.
Ora, ecco la parte interessante.
Parleremo dei sottomenu, va bene?
Quindi, come fa il browser a sapere quando qualcosa è un sottomenu?
Beh, può guardare il DOM, e può guardare in basso e andare, oh, sono in navigazione.
E ora sono in una lista non ordinata, ed eccomi qui in una voce della lista.
Se trova un'altra voce della lista più in basso, è una specie di concatenamento,
sa, oh, oh, sono in un sottomenu.
Quindi proprio qui, sa che sono nel navigatore, sono all'interno di una lista,
e ho appena trovato una lista non ordinata dentro.
Quindi, come lo abbiamo impostato in modo che non venga visualizzato all'inizio è che ho
impostato la posizione su assoluto, e ho impostato il display su nessuno.
Quindi non verrà visualizzato per impostazione predefinita.
Non succedera'.
Va bene?
Allora, come faccio a farlo in modo
che si presenti all'improvviso se vogliamo fare qualcosa su quella linea?
Bene, vogliamo scoprire come cambiarlo qui, quando passo il mouse su un elemento della lista
che ha una lista non ordinata sotto di esso, cambia quel display da nessuno a blocco.
Quindi, queste due righe di codice proprio qui, questo lo sta davvero impostando.
In modo che quando vado qui, per impostazione predefinita, il
display non è nessuno, ma quando passo il mouse, il display diventa blocco.
È un codice molto semplice, molto breve, molto potente da capire.
Quindi ti ho mostrato alcuni modi diversi in cui puoi modellare le tue barre di navigazione.
Abbiamo orizzontale, abbiamo verticale, abbiamo discesa.
Spero davvero che sceglierai uno con cui ti senti più a tuo agio, o
in realtà, il più entusiasta, e creerai uno per
il tuo progetto finale qui in questa classe CSS.
Non preoccuparti se ti imbatti in problemi.
Pubblicare nell'area discussioni.
Vai online e cerca le risposte.
Ma quello che spero davvero è che tu possa creare qualcosa di cui sei orgoglioso,
che sia bello e accessibile.
Buona fortuna.