Accentsconagua
Share
Velkommen til neste i vår serie av opplæringsprogrammer hvor vi bruker den generelle søskenkombinatoren ~ å skape ulike komponenter for Internett. Denne opplæringen vil dekke navigasjonselementer ved hjelp av koblinger og radioinnganger.
I tillegg til CSS selectors, er Kommer til å endres eiendom og inntastingsstatus fra den forrige opplæringen, vil vi også dekke en grensehakk, Sass for sløyfer, calc (), og tilgjengelighet!
Her er den demo vi skal bygge:
En rask ansvarsfraskrivelse: Disse CSS-effektene kan eller ikke fungerer i eldre nettlesere. Jeg har testet dem i de nyeste versjonene av Chrome, Firefox og Safari..
Jeg bruker Sass, en CSS preprocessor for å øke hastigheten på kodingsprosessen!
Jeg vil også bruke den fantastiske AutoPrefixeren i stedet for leverandørprefikser. Hvis du bruker CodePen, må du gå til pennens innstillinger, klikke på CSS og velge AutoPrefixer.
Den første versjonen vi skal skape er fanebladet som består av koblinger. Dette er den mest enkle og enkle å lage; det er ideelt for en generell navigasjon som skal brukes på flere forskjellige nettsider.
Vi starter med en grunnleggende element med fem koblinger og en kantlinje. Du kan også bruke et annet beholderelement, men jeg foretrekker et navigasjonselement siden det er formålet med denne brikken. Grensen tjener til å vise hvilken kobling som er svevet over eller valgt.
Jeg pakker også navigasjonen min i en annen container, men du trenger ikke det for grunnleggende oppslag!
Det neste trinnet er å skape en visuell base for fanene. Beholderen skal være relativt posisjonert; Vi bruker flexbox til å plassere linkene på en linje, men du kan også bruke flyter. Koblingene skal ta opp samme mengde plass, og fylle opp hele bredden av beholderen.
Denne delen kan være vanskelig, så du bør justere den på grunnlag av brukssaken din. Jeg visste at jeg trengte akkurat fem koblinger for denne demoen, så jeg kunne bruke 5 som en Sass-variabel $ n for å beregne den eksakte bredden kalk (100% / 5). Jeg gjorde dette fordi jeg ønsket å kunne enkelt og raskt endre koblingsnummeret øverst på stilarket, men du kan også bruke en rett prosentandel 20% hvis du foretrekker å ikke bruke calc (), eller en fast bredde 160 piksler hvis du ikke vet hvor mange lenker du har.
Grensen skal ha samme bredde som hver lenke. Vi bruker samme bredde som vi brukte for koblingene. Til slutt vil vi plassere det helt nederst i venstre hjørne av beholderen.
Neste del bruker den generelle velgeren! Vi skal styling :sveve, :aktiv, og :fokus, så vel som en .aktiv klasse hvis du vil bruke JavaScript for å gjøre grensen "pinne" når du klikker på en kobling.
Hver gang du svinger over en lenke, må grensen flytte til posisjonen til lenken. Hvis hver lenke er 160 piksler, så svever over den andre lenken grensen til å bevege seg 160 piksler til høyre; Sveve over den tredje lenken skal føre til at grensen beveger seg 320px til høyre.
Ved hjelp av denne informasjonen kan vi bygge en Sass for loop som beregner tallene automatisk. Dette er et direktiv som utsender et sett med stiler et visst antall ganger. I dette tilfellet vil det utgjøre denne transformasjonsstilen $ n ganger, eller 5, som vi angitt tidligere.
en @ for $ i fra 1 til $ n & nth-barn (# $ i) & .aktiv ~ hr transform: translateX (# ($ i - 1) * 100%); :: sving, &: fokus, og: aktiv ~ hr, ~. aktiv ~ hr transform: translateX (# ($ i - 1) * 100%);
$ i er nummeret løkken er på for øyeblikket: 1, 2, 3, 4 eller 5. For å kunne bruke dette nummeret inne i løkken, må vi unnslippe det ved å pakke det inn med et pundskilt og krøllete parenteser # .
Hvis vi skulle bruke faste bredder, ville vi erstatte 100%, som beveger grensen med full bredde, med 160 piksler eller hvorvidt koblingene må være. Hvis du ender med å bruke .aktiv, du må bruke spesifisere ~ .aktiv ~ hr som i eksemplet ovenfor, fordi ellers vil grensen holde seg til den aktive posisjonen.
Du kan også gjøre dette uten forløp, men det er ikke så lett å oppdatere eller justere. Den andre lenken (a: n-te-barn (2)) beveger seg translateX (100%), den fjerde lenken beveger seg translateX (300%), etc. Du må spesifisere en transformasjon for hver kobling i navigasjonen din.
Hvis du svinger over Sass-koden i eksemplet ovenfor, a Se kompilert knappen skal vises nederst til høyre som du kan klikke for å vise kompilert CSS. Dette er nyttig for å se hvordan forløp fungerer og hvordan du kan oppnå det samme uten dette Sass-direktivet.
Til slutt legger vi til noen overganger for å lage grensen "glidende" bevegelse fra lenke til lenke. Vi legger til en langsommere overgang til selve grensen for når den returnerer til standardposisjonen, og en raskere overgang til grensen på svinger slik at den klikker på den riktige koblingen. Det siste trinnet er å legge til noen fargeendringer i grensen på hover og på klikk!
Denne neste versjonen av den tilpassede fanebladnavigasjonen ser ut som den første, men bruker radioinnganger i stedet for koblinger. Dette fungerer bra når du navigerer gjennom innholdsseksjoner på samme side!
Hovedforskjellen i HTML er at vi nå trenger to elementer per fane: en etikett for å visuelt representere fanen og en radioinngang for å legge til funksjonalitet.
Hver radioutgang har samme navn, slik at valg av en vil deaktivere de andre. Etikettene samsvarer med hver inntastings ID. Du kan også organisere dine radioinnganger og etiketter slik at tilsvarende etiketter og innganger er ved siden av hverandre hvis den strukturen er å foretrekke!
Styling for radiofliken nav er nesten nøyaktig det samme som linkfan nav. Den eneste forskjellen er at hver radioinngang må være helt posisjonert direkte på toppen av den tilhørende etiketten. Jeg brukte en Sass for løkke for å unngå repetisjon, og også brukt calc () for å unngå prosentvise decimaler som 16,6667%.
For transformasjonene, i stedet for å ha en .aktiv klassen, vi skal bruke :sjekket. Denne tilstanden er nyttig fordi nå vil grensen "holde fast" når du velger en av radioene!
Pil-fanene er funksjonelt de samme som radioflikene; de varierer kun visuelt. Denne versjonen er bra for breadcrumb-stil eller trinnvis innhold. Du kan også bruke koblinger hvis du foretrekker det!
HTML-oppsettet er det samme som radioinngangsflikene ovenfor. Hvis du vil bruke lenker, vil det være det samme som lenkefanene.
Den største forskjellen i styling kommer fra grensen som beveger seg på hover. I stedet for en tynn linje på bunnen, tar grensen i stedet hele navigasjonens høyde. Den blir også plassert bak innganger og etiketter.
For å lage de spisse endene bruker vi en grensehakk på hr: før og hr: etter. Hvert pseudoelement vil ha en høyde og bredde på 0, men en kantbredde som gjør den så høy som foreldrebeholderen. Dette skaper trekanter som vi kan justere individuelt for å skape våre spisse ender.
For venstre sett av trekanter bør den venstre grensen være hvit mens de andre er farget; For det riktige settet av trekanter skal den venstre grensen være farget mens de andre er hvite. Vi vil også sette venstre og høyre kant av begge settene til å være tynnere enn topp og bunn, slik at kantene ser kortere ut. Da plasserer vi hvert sett på venstre og høyre side av hr.
Funksjonaliteten og animasjonen er nøyaktig det samme som radioinngangene, eller koblinger hvis du brukte dem i stedet.
Mens disse navigasjonselementene fungerer bra fra et visuelt synspunkt, kan noen som bruker en skjermleser eller som trenger andre former for tilgjengelighet, ha problemer med å lese eller få tilgang til hvert alternativ.
For å rette opp noen av disse problemene, kan vi bruke en kombinasjon av roller, etiketter, skjulte elementer og tabindexattributter, slik at navigasjonen leser riktig fra et tilgjengelighetssynspunkt. Jeg lærer fortsatt mye om tilgjengelighet, men denne kombinasjonen synes å fungere best med denne typen navigasjon.
Jeg fokuserte hovedsakelig på å gjemme elementer som ikke er nødvendige for skjermlesere, mens merkingselementer som er viktige for navens funksjonalitet, for eksempel radioinngangene som ikke inneholder tekst som standard som koblinger gjør. Prøv hva som fungerer best for brukssaken din!
Det finnes dusinvis av forskjellige måter å utnytte den generelle søskenvelgeren som er visuell, funksjonell eller begge deler. Det gir en kraftig måte å tilpasse komponenter uten å måtte bruke mer enn bare CSS og HTML. Vi har dekket skjema og navigasjonselementer så langt; I den neste, lærer vi hvordan du lager en tilpasset rullegardinmeny. Ta gjerne en kommentar nedenfor hvis du har spørsmål eller tilbakemelding!
