Accentsconagua
Share
Benvenuti al prossimo della nostra serie di tutorial in cui utilizziamo il combinatore di fratellanza generale ~ per creare vari componenti per il web. Questo tutorial tratterà gli elementi di navigazione usando link e input radio.
Oltre ai selettori CSS, il cambierà proprietà e stati di input del precedente tutorial, copriremo anche un hack del bordo, Sass for loops, Calc (), e accessibilità!
Ecco la demo che costruiremo:
Un rapido disclaimer: questi effetti CSS potrebbero non funzionare nei vecchi browser, li ho testati nelle ultime versioni di Chrome, Firefox e Safari.
Userò Sass, un preprocessore CSS per accelerare il processo di codifica!
Userò anche lo straordinario AutoPrefixer invece dei prefissi dei produttori. Se usi CodePen, assicurati di andare alle impostazioni della penna, fai clic su CSS e seleziona AutoPrefixer.
La prima versione che creeremo è la barra delle schede comprendente collegamenti. Questo è il più semplice e facile da fare; è ideale per una navigazione generale da utilizzare su più pagine Web diverse.
Inizieremo con una base elemento con cinque collegamenti e un bordo. Puoi anche utilizzare un elemento contenitore diverso, ma preferisco un elemento di navigazione poiché questo è lo scopo di questo snippet. Il bordo serve a mostrare quale link è stazionato sopra o selezionato.
Metto anche la mia navigazione in un altro contenitore, ma non è necessario per il markup di base!
Il prossimo passo è creare una base visiva per le schede. Il contenitore dovrebbe essere posizionato relativamente; useremo la flexbox per posizionare i collegamenti su una riga, ma puoi anche usare i float. I collegamenti dovrebbero occupare lo stesso spazio, occupando l'intera larghezza del contenitore.
Questa parte può essere complicata, quindi dovresti regolarla in base al tuo caso d'uso. Sapevo che avevo bisogno di esattamente cinque collegamenti per questa demo, quindi ero in grado di usare 5 come variabile di Sass $ n per calcolare la larghezza esatta calc (100% / 5). L'ho fatto perché volevo poter modificare facilmente e rapidamente il numero di collegamento nella parte superiore del mio foglio di stile, ma puoi anche utilizzare una percentuale diritta 20% se preferisci non usare Calc (), o una larghezza fissa 160px se non sai quanti link avrai.
Il bordo dovrebbe avere la stessa larghezza di ogni link: useremo la stessa larghezza che abbiamo usato per i collegamenti. Infine, lo posizioneremo assolutamente nell'angolo in basso a sinistra del contenitore.
La parte successiva usa il selettore generale! Saremo styling : hover, :attivo, e :messa a fuoco, così come un .attivo classe se desideri utilizzare JavaScript per rendere il bordo "stick" una volta fatto clic su un link.
Ogni volta che si passa il mouse su un collegamento, il bordo deve spostarsi nella posizione del collegamento. Se ogni collegamento è 160px, quindi passando con il mouse sopra il secondo link, il bordo si muoverà 160px a destra; passare sopra il terzo link dovrebbe far muovere il bordo 320px a destra.
Usando queste informazioni, possiamo costruire un Sass per loop che calcola automaticamente i numeri. Questa è una direttiva che emette un insieme di stili un certo numero di volte, in questo caso produrrebbe questo stile di trasformazione $ n tempi, o 5, come specificato in precedenza.
a @for $ i da 1 a $ n &: nth-child (# $ i) & .active ~ hr transform: translateX (# ($ i - 1) * 100%); &: hover, &: focus, &: active ~ hr, ~ .active ~ hr transform: translateX (# ($ i - 1) * 100%);
$ i è il numero al quale il loop è attualmente attivo: 1, 2, 3, 4 o 5. Per poter utilizzare questo numero all'interno del ciclo, dovremo sfuggirlo avvolgendolo con un cancelletto e parentesi graffe # .
Se dovessimo usare larghezze fisse, sostituiremmo 100%, che muove il bordo per la sua larghezza completa, con 160px o comunque i collegamenti devono essere ampi. Se finisci per usare .attivo, dovrai usare specificare ~ .active ~ hr come nell'esempio sopra perché altrimenti il bordo si attaccherà alla posizione attiva.
Puoi anche farlo senza un ciclo for, ma non è così facile da aggiornare o regolare. Il secondo link (un: nth-child (2)) si muove translateX (100%), il quarto link si muove translateX (300%), ecc. Dovrai specificare una trasformazione per ogni link nella tua navigazione.
Se passi il mouse sopra il codice Sass nell'esempio sopra, a Visualizza compilata pulsante dovrebbe apparire nell'angolo in basso a destra che è possibile fare clic per visualizzare il CSS compilato. Questo è utile per vedere come funziona il ciclo for e come si può ottenere lo stesso senza questa direttiva Sass.
Infine, aggiungeremo alcune transizioni per creare il movimento "scorrevole" del bordo da collegamento a collegamento. Aggiungiamo una transizione più lenta al bordo stesso per quando ritorna alla posizione di default e una transizione più veloce al bordo al passaggio del mouse in modo che si agganci al collegamento corretto. L'ultimo passaggio consiste nell'aggiungere alcuni cambiamenti di colore al bordo al passaggio del mouse e al clic!
Questa prossima versione della navigazione delle schede personalizzate sembra identica alla prima, ma utilizza gli input radio invece dei collegamenti. Funziona bene quando si naviga attraverso le sezioni di contenuto sulla stessa pagina!
La principale differenza nell'HTML è che ora abbiamo bisogno di due elementi per tabulazione: un'etichetta per rappresentare visivamente la scheda e un ingresso radio per aggiungere funzionalità.
Ogni ingresso radio ha lo stesso nome in modo che la selezione di uno deselezionerà gli altri. Le etichette corrispondono all'ID di ciascun input. È inoltre possibile organizzare gli input e le etichette della radio in modo che le etichette e gli input corrispondenti siano uno accanto all'altro se è preferibile quella struttura!
Lo stile per la scheda radio nav è quasi identico a quello della scheda di collegamento nav. L'unica differenza è che ogni ingresso radio deve essere posizionato in modo assoluto direttamente sulla sua etichetta corrispondente. Ho usato un Sass per il loop per evitare la ripetizione e anche usato Calc () per evitare decimali percentuali come 16,6667%.
Per le trasformazioni, invece di avere un .attivo classe, useremo : selezionata. Questo stato è utile perché ora il bordo si "attacca" quando selezioni una delle radio!
Le schede freccia sono funzionalmente uguali alle schede della radio; differiscono solo visivamente. Questa versione è adatta per i contenuti in stile breadcrumb o graduale. Puoi anche usare i link se preferisci!
L'impostazione HTML è la stessa delle schede di ingresso radio sopra. Se si desidera utilizzare i collegamenti, sarà lo stesso delle schede di collegamento.
La più grande differenza nello stile deriva dal bordo che si muove al passaggio del mouse. Invece di una linea sottile sul fondo, il bordo occupa l'intera altezza della navigazione. Si posiziona anche dietro gli input e le etichette.
Per creare le estremità appuntite, useremo un hack del bordo hr: prima e hr: dopo. Ogni pseudo elemento avrà un'altezza e una larghezza di 0, ma una larghezza del bordo che lo rende alto come il contenitore genitore. Questo crea triangoli che possiamo regolare individualmente per creare le nostre estremità appuntite.
Per il gruppo di triangoli a sinistra, il bordo sinistro deve essere bianco mentre gli altri sono colorati; per la giusta serie di triangoli, il bordo sinistro dovrebbe essere colorato mentre gli altri sono bianchi. Imposteremo anche i bordi sinistro e destro di entrambi gli insiemi in modo che siano più sottili della parte superiore e inferiore in modo che i bordi sembrino più corti. Quindi posizioneremo ciascun set sui lati sinistro e destro di hr.
La funzionalità e l'animazione sono esattamente le stesse degli ingressi radio, o collegamenti se li hai usati.
Mentre questi elementi di navigazione funzionano bene da un punto di vista visivo, qualcuno che utilizza uno screen reader o che ha bisogno di altre forme di accessibilità può avere problemi a leggere o accedere a ciascuna opzione.
Per rimediare ad alcuni di questi problemi, possiamo utilizzare una combinazione di ruoli, etichette, elementi nascosti e attributi tabindex in modo che la navigazione possa essere letta correttamente da un punto di vista dell'accessibilità. Sto ancora imparando molto sull'accessibilità, ma questa combinazione sembra funzionare meglio con questo stile di navigazione.
Mi sono concentrato principalmente sulla possibilità di nascondere elementi che non sono necessari per gli screen reader, mentre si etichettano gli elementi che sono importanti per la funzionalità del navigatore, come gli ingressi radio che non includono il testo di default come i collegamenti. Prova ciò che funziona meglio per il tuo caso d'uso!
Esistono dozzine di modi diversi per utilizzare il selettore generale del fratello che sono visivi, funzionali o entrambi. Offre un modo efficace per personalizzare i componenti senza dover utilizzare molto più di CSS e HTML. Abbiamo trattato finora gli elementi di forma e navigazione; nel prossimo, impareremo come creare un menu a discesa personalizzato. Sentiti libero di lasciare un commento qui sotto se hai domande o feedback!
