Accentsconagua
Share
Bine ați venit la următoarea serie de tutoriale unde folosim combinatorul general de frate ~ pentru a crea diferite componente pentru web. Acest tutorial va acoperi elementele de navigație folosind link-uri și intrări radio.
În plus față de selectorii CSS, se va schimba proprietăți și stări de intrare din tutorialul anterior, vom acoperi și un hack de frontieră, Sass pentru bucle, calc (), și accesibilitatea!
Iată demo-ul pe care îl vom construi:
O avertizare rapidă: aceste efecte CSS pot funcționa sau nu în browsere mai vechi - le-am testat în cele mai recente versiuni de Chrome, Firefox și Safari.
Voi folosi Sass, un preprocesor CSS pentru a accelera procesul de codificare!
Voi folosi, de asemenea, uimitorul AutoPrefixer în locul prefixelor furnizorilor. Dacă utilizați CodePen, asigurați-vă că mergeți la setările stiloului dvs., faceți clic pe CSS și selectați AutoPrefixer.
Prima versiune pe care o vom crea este bara de tab-uri care cuprinde link-uri. Aceasta este cea mai simplă și mai ușor de făcut; este ideal pentru ca o navigație generală să fie utilizată pe mai multe pagini web diferite.
Vom începe cu un program de bază element cu cinci legături și o margine. De asemenea, puteți utiliza un element de container diferit, dar prefer un element de navigație, deoarece acesta este scopul acestui fragment. Frontiera servește pentru a arăta link-ul pe care este transmis sau selectat.
De asemenea, îmi împachetez navigația într-un alt container, dar nu ai nevoie de asta pentru marcarea de bază!
Următorul pas este să creați o bază vizuală pentru file. Containerul trebuie poziționat relativ; vom folosi flexbox pentru a poziționa linkurile pe o singură linie, dar puteți utiliza și flotoare. Legăturile ar trebui să ia o cantitate egală de spațiu, umplând întreaga lățime a containerului.
Această parte poate fi dificilă, deci ar trebui să o ajustați în funcție de cazul dvs. de utilizare. Știam că am nevoie de exact cinci link-uri pentru acest demo, așa că am reușit să folosesc 5 ca variabilă Sass $ n pentru a calcula lățimea exactă calc (100% / 5). Am făcut acest lucru pentru că am vrut să pot schimba ușor și rapid numărul de link-uri din partea de sus a foii de stil, dar puteți utiliza și un procentaj simplu 20% dacă preferați să nu utilizați calc (), sau o lățime fixă 160px dacă nu știți câte legături veți avea.
Marginea trebuie să aibă aceeași lățime ca fiecare legătură - vom folosi aceeași lățime pe care am folosit-o pentru link-uri. În cele din urmă, o vom poziționa absolut în colțul din stânga jos al containerului.
Următoarea parte folosește selectorul general! Vom face stil :planare, :activ, și : focus, precum și un .activ clasa dacă doriți să utilizați JavaScript pentru a face "stick" de frontieră odată ce faceți clic pe un link.
De fiecare dată când plasați cursorul peste o legătură, granița trebuie să se deplaseze în poziția linkului. Dacă există fiecare legătură 160px, apoi plasarea cursorului peste a doua legătură determină mișcarea frontierei 160px la dreapta; trecerea deasupra celei de-a treia legături ar trebui să determine mutarea frontierei 320px la dreapta.
Folosind aceste informații, putem construi un Sass pentru bucla care calculează automat numerele. Aceasta este o directivă care scoate un set de stiluri de un anumit număr de ori - în acest caz, ar scoate acest stil de transformare $ n ori, sau 5, așa cum am specificat mai devreme.
a @ pentru $ i de la 1 la $ n &: nth-child (# $ i) & .activ ~ hr transform: translateX (# $ i - 1) * 100%); : & hover, &: focus, &: activ ~ hr, ~ .activ ~ hr transform: translateX (# ($ i - 1) * 100%);
$ i este numărul în care se află bucla curentă: 1, 2, 3, 4 sau 5. Pentru a utiliza acest număr în interiorul bucla, va trebui să scăpăm de ea prin împachetarea cu un semn de literă și paranteze curbate # .
Dacă ar fi să folosim lățimi fixe, am fi înlocuit 100%, care mută frontiera prin lățimea sa, cu 160px sau oricât de largi trebuie să fie legăturile. Dacă ați terminat de utilizat .activ, va trebui să utilizați specificați ~ ca în exemplul de mai sus, deoarece în caz contrar frontiera se va lipi de poziția activă.
Puteți, de asemenea, face acest lucru fără o buclă de buzunar, dar nu este ușor de actualizat sau de ajustat. Al doilea link (o: nth-copil (2)) mișcări translateX (100%), al patrulea link se mișcă translateX (300%), etc. Va trebui să specificați o transformare pentru fiecare legătură în navigația dvs..
Dacă treceți peste codul Sass în exemplul de mai sus, a Vizualizați compilația butonul trebuie să apară în colțul din dreapta jos pe care îl puteți accesa pentru a vizualiza CSS compilat. Acest lucru este util pentru a vedea cum funcționează buclă pentru și cum puteți obține același lucru fără această directivă Sass.
În cele din urmă, vom adăuga câteva tranziții pentru a crea mișcarea de translatare a frontierei de la link spre link. Vom adăuga o tranziție mai lentă la granița însăși atunci când se întoarce la poziția prestabilită și o tranziție mai rapidă la graniță cu ajutorul mouse-ului, astfel încât să se fixeze la link-ul corect. Ultimul pas este să adăugați câteva modificări de culoare la margine, pe hover și pe clic!
Această versiune următoare a navigării tab-ului personalizat arată identică cu prima, dar utilizează intrări radio în loc de linkuri. Acest lucru funcționează bine atunci când navigați prin secțiuni de conținut de pe aceeași pagină!
Principala diferență în HTML este că acum avem nevoie de două elemente pe fiecare filă: o etichetă care să reprezinte vizual fila și o intrare radio pentru a adăuga funcționalitate.
Fiecare intrare radio are același nume, astfel încât selectarea să deselecteze celelalte. Etichetele corespund ID-ului fiecărei intrări. De asemenea, puteți organiza intrările radio și etichetele astfel încât etichetele și intrările corespunzătoare să fie una lângă cealaltă, dacă structura este preferabilă!
Stylingul pentru tab-ul radio-nav este aproape exact același lucru cu fila link-ului nav. Singura diferență este că fiecare intrare radio trebuie să fie poziționată absolut direct deasupra etichetei corespunzătoare. Am folosit un Sass pentru buclă pentru a evita repetarea și, de asemenea, folosit calc () pentru a evita zecimale procentuale, cum ar fi 16,6667%.
Pentru transformări, în loc de a avea un .activ clasa, vom folosi : verificat. Această stare este utilă, deoarece acum granița va "rămâne" atunci când selectați unul dintre radiouri!
Săgețile cu săgeți sunt în mod funcțional identice cu filele radio; ele diferă doar vizual. Această versiune este bună pentru stilul de pescuit sau conținutul pas cu pas. De asemenea, puteți utiliza linkuri dacă preferați!
Setarea HTML este identică cu filele de intrare radio de mai sus. Dacă doriți să utilizați link-uri, acesta va fi același ca și filele de legătură.
Cea mai mare diferență în ceea ce privește stilul vine de la granița care se mișcă pe hover. În locul unei linii subțiri în partea de jos, marginea, în schimb, ocupă întreaga înălțime a navigației. Se poziționează, de asemenea, în spatele intrărilor și etichetelor.
Pentru a crea capetele ascuțite, vom folosi hack-ul de frontieră hr: inainte și hr: după. Fiecare element pseudo va avea o înălțime și o lățime de 0, dar o lățime a marginii care îl face la fel de înaltă ca și containerul părinte. Aceasta creează triunghiuri pe care le putem adapta individual pentru a crea capetele noastre ascuțite.
Pentru setul stâng de triunghiuri, granița stângă ar trebui să fie albă, în timp ce celelalte sunt colorate; pentru setul corect de triunghiuri, marginea din stânga trebuie să fie colorată, iar celelalte să fie albe. De asemenea, setăm ca marginile din stânga și din dreapta ale celor două seturi să fie mai subțiri decât în partea superioară și inferioară, astfel încât marginile să pară mai scurte. Apoi vom poziționa fiecare set pe partea stângă și pe partea dreaptă a lui HR.
Funcționalitatea și animația sunt exact aceleași ca și intrările de radio sau link-urile dacă le-ați folosit.
Deși aceste elemente de navigare funcționează bine din punct de vedere vizual, cineva care utilizează un cititor de ecran sau care are nevoie de alte forme de accesibilitate poate avea dificultăți în citirea sau accesarea fiecărei opțiuni.
Pentru a remedia unele dintre aceste probleme, putem folosi o combinație de roluri, etichete, elemente ascunse și atribute tabindex astfel încât navigația să citească corect dintr-un punct de accesibilitate. Încă învăț multe despre accesibilitate, dar această combinație pare să funcționeze cel mai bine cu acest stil de navigație.
M-am concentrat în principal pe ascunderea elementelor care nu sunt necesare pentru cititoarele de ecran, în timp ce elementele de etichetare care sunt importante pentru funcționalitatea navigatorului, cum ar fi intrările radio care nu includ textul implicit ca link-urile. Încearcă ce funcționează cel mai bine pentru cazul dvs. de utilizare!
Există zeci de moduri diferite de a utiliza selectorul general de frate care sunt vizuale, funcționale sau ambele. Acesta oferă o modalitate puternică de personalizare a componentelor, fără a fi nevoie să utilizați mai mult decât CSS și HTML. Am acoperit elemente de formare și de navigare până acum; în următorul, vom învăța cum să facem un dropdown personalizat. Simțiți-vă liber să renunțați la un comentariu mai jos dacă aveți întrebări sau feedback!
