4 måter å lage fantastiske CSS-only-trekk
Innholdskonvensjoner gjør et nyttig designmønster. Du kan bruke dem til mange forskjellige ting: for menyer, lister, bilder, artikkelutdrag, tekstbiter og til og med videoer
De fleste trekkspill der ute stole på JavaScript, hovedsakelig på jQuery, men siden bruken av avanserte CSS3 teknikker ble utbredt, kan vi også finne gode eksempler på det bruk bare HTML og CSS, som gjør dem tilgjengelige i miljøer med deaktivert JavaScript.
Å lage CSS-kun trekkspill kan være en vanskelig oppgave, så i dette innlegget vil vi prøve å forstå de viktigste begrepene utviklere bruker når de trenger å lage en.
Ved å lage CSS-bare faner er det vanligvis to hovedmetoder, hver av dem har to hyppige brukstilfeller. Den første tilnærmingen benytter skjulte formelementer, mens den andre bruker CSS pseudo-selektorer.
1. Radioknappmetoden
Radioknappmetoden legger til et skjult radioinngang og en tilhørende etikett-kode til hver trekk i trekkspillet. Logikken er enkel: Når brukeren velger en fane, kontrollerer de i utgangspunktet radioknappen som tilhører den kategorien, på samme måte når de fyller ut et skjema. Når de klikker på neste fane i trekkspillet, velger de neste radioknapp, osv.
I denne metoden, Bare en fane kan være åpen samtidig. Logikken til HTML ser noe ut som dette:
Innholdstittel (ikke bruk h1-tag her)
Noe innhold ...
p>
Du trenger å Legg til et separat radiomerkepar for hver kategori i trekkspillet. HTML alene vil ikke gi den ønskede oppførselen, du må legge til de riktige CSS-reglene også, la oss se hvordan du kan oppnå det.
Faste høyde vertikale faner
I denne løsningen (se skjermbildet nedenfor) gjemte utvikleren radioknappen ved hjelp av skjerm: ingen; regelen, så ga han en relativ posisjon til etikettetiketten som inneholder tittelen på hver kategori, og en absolutt posisjon til den tilsvarende etiketten: etter pseudo-element.
Sistnevnte holder håndtaket merket med et grønt + tegn som åpner kategoriene. De lukkede fanene bruker også et håndtak merket med grønt “-” tegn. I CSS velges de lukkede kategoriene ved hjelp av elementet + elementvelgeren.
Du må også gi innholdet på den åpne kategorien en fast høyde. For å gjøre dette, velg kroppen på den åpne kategorien (merket med tabulatorklassen i HTML-koden ovenfor) ved hjelp av elementet 1 ~ elementet 2 CSS-velgeren.
Den grunnleggende logikken til CSS er her:
input [type = radio] display: none; label posisjon: relative; skjerm: blokk; etikett: etter innhold: "+"; posisjon: absolutt; høyre: 1em; inngang: merket + etikett: etter innhold: "-"; input: sjekket ~ .tab-innhold høyde: 150px;
Du kan se på hele CSS her på Codepen. CSS er opprinnelig skrevet i Sass, men hvis du klikker på “Se kompilert” knappen, kan du se den kompilerte CSS-filen.
Bildekonstruksjon med radioknapper
Dette vakre bildet trekkspillet bruker samme radioknappmetode, men i stedet for etiketter, utvikleren her brukte figcaption HTML taggen å oppnå trekkspillets oppførsel.
CSS er noe annerledes, hovedsakelig fordi i dette tilfelle ikke kategoriene er plassert vertikalt, men horisontalt. Utvikleren benyttet elementet + elementet CSS-velgeren (som ble brukt i det forrige tilfellet for å velge byttene) for å sikre at kantene på de dekket bildene fortsatt er synlige.
Les den detaljerte veiledningen om hvordan du lager dette elegante CSS-eneste trekkspillet.
2. Kontrollpanelmetoden
Avkrysningsboks-metoden bruker boksens inntastetype i stedet for alternativknappen. Når brukeren velger en fane, kontrollerer de i utgangspunktet den tilhørende boksen.
Forskjellen i forhold til radioknappmetoden er at den er mulig å åpne flere enn én fane samtidig, akkurat som det er mulig å sjekke mer enn en avmerkingsboks i et skjema.
På den annen side vil ikke tappene lukke seg selv alene når brukeren klikker på en annen. Logikken til HTML er den samme som før, bare i dette tilfellet må du bruke avkrysningsboksen for inntastetype.
Innholdstittel (ikke bruk h1-tag her)
Noe innhold ...
p>
Faste høydeboksen Accordion
Hvis du vil ha faner med fast høydeinnhold, er logikken til CSS stort sett den samme som i alternativknappen saken, det er bare inngangstypen har endret seg fra radio til avmerkingsboks. I denne Codepen-pennen kan du se koden.
Væskehøyde avkrysningsboksen
Når flere enn én kategori er åpen samtidig, kan det hende at faner med fast høyde har en negativ innvirkning på brukeropplevelsen, ettersom høyden på trekkspillet kan vokse betydelig. Dette kan forbedres hvis du endre den faste høyden til væsken høyde; Det betyr at høyden på de åpne kategoriene utvides eller krympes i henhold til størrelsen på innholdet de holder.
For å gjøre det må du Endre den faste høyden på fanens innhold til en maksimal høyde, og utnytte relative enheter:
input: sjekket ~ .tab-innhold maks-høyde: 50em;
Hvis du vil forstå hvordan denne metoden fungerer, kan du se på denne Codepen.
3. Målmetoden
: Målet er en av CSS3s pseudo-selektorer. Med hjelpen kan du koble et HTML-element til en ankermerke på følgende måte:
Tittel på fanen
Innhold av fanen
Når brukeren klikker på tittelen på en fane, åpnes hele delen takket være :mål pseudo-selector, og URL-adressen vil også bli endret til følgende format: www.some-url.com/#tab-1.
Den åpne kategorien kan styles i CSS ved hjelp av seksjon: mål ... regel. Vi har en flott opplæring her på hongkiat om hvordan du kan lage fine CSS-eneste trekkspill med :mål metode i både vertikale og horisontale oppsett.
Den største mangelen på :mål metoden er det det endrer nettadressen når brukeren klikker på kategoriene. Dette påvirker nettleserloggen og nettleserens tilbakeknapp vil ikke ta brukeren til forrige side, men til trekkspillets tidligere tilstand.
4. The: svever Metode
Denne sistnevnte mangelen kan overvinnes dersom vi bruker :sveve CSS pseudovelger i stedet for :mål, men i dette tilfellet vil ikke kategoriene reagere på klikk, men til hover-hendelsen. Trikset her er det du trenger enten skjul de unhovered elementene, eller redusere bredden eller høyden - avhengig av utformingen av kategoriene
Det svevede elementet må gjøres synlig, eller sett til full bredde / høyde for å få trekkspillet til å fungere.
Følgende 3 CSS-eneste akkordjoner ble alle laget med: svevermetoden, klikk på linkene under skjermbildene for å se koden.
Horisontal bildeoverdragelse
Skewed Accordion
Hover-Activated Accordion Med Standard State
