4 måder at oprette fantastiske CSS-only Accordions
Indholdsfortegnelser gør et nyttigt designmønster. Du kan bruge dem til mange forskellige ting: til menuer, lister, billeder, artiklens uddrag, tekstuddrag og endda videoer
De fleste accesioner derude er afhængige af JavaScript, hovedsagelig på jQuery, men siden brugen af avancerede CSS3 teknikker blev udbredt, kan vi også finde gode eksempler på det brug kun HTML og CSS, som gør dem tilgængelige i miljøer med handicappede JavaScript.
Oprettelse af CSS-kun accordeoner kan være en vanskelig opgave, så i dette indlæg vil vi forsøge at forstå de vigtigste begreber udviklere bruger, når de skal oprette en.
Ved oprettelse af CSS-kun faner er der normalt to hovedmetoder, hver af dem har to hyppige brugssager. Den første tilgang benytter skjulte formelementer, mens den anden gør brug af CSS pseudo-selektorer.
1. Radio Knap Metode
Radio-knapmetoden tilføjer en skjult radioindgang og et tilsvarende label-tag til hver fane i accordeonet. Logikken er enkel: Når brugeren vælger en fane, kontrollerer de i grunden den radioknap, der tilhører den pågældende fane, på samme måde, når de udfylder en formular. Når de klikker på den næste fane i accordeonet, vælger de den næste radioknap mv.
I denne metode, Kun en fane kan være åben på samme tid. Logikken i HTML'en ser sådan ud:
Indhold Titel (brug ikke h1 tag her)
Nogle indhold ...
p>
Du skal Tilføj et separat radiomærkepar for hver fane i harmonikaet. HTML alene vil ikke give den ønskede adfærd, du skal også tilføje de relevante CSS-regler, lad os se, hvordan du kan udføre det.
Faste højde lodrette faner
I denne løsning (se skærmbilledet nedenfor) gemte bygherren fjernbetjeningen med hjælp fra display: none; regel, så gav han en relativ position til etikettetiketten, der indeholder titlen på hver fane og en absolut position til den tilsvarende etiket: efter pseudo-element.
Sidstnævnte holder håndtaget mærket med et grønt + tegn, der åbner fanerne. De lukkede faner anvender også et håndtag mærket med grønt “-” skilte. I CSS vælges de lukkede faner ved hjælp af elementet + elementvælgeren.
Du skal også give indholdet af den åbne fane en fast højde. For at gøre dette skal du vælge kroppen på den åbne fane (markeret med fanebladet indhold i HTML'en ovenfor) ved hjælp af elementet 1 ~ elementet 2 CSS-vælgeren.
Den grundlæggende logik af CSS er her:
input [type = radio] display: none; label position: relative; display: blok; label: efter content: "+"; position: absolut; højre: 1em; input: tjekket + etiket: efter indhold: "-"; input: tjekket ~ .tab-indhold højde: 150px;
Du kan se på hele CSS her på Codepen. CSS er oprindeligt skrevet i Sass, men hvis du klikker på “Se kompileret” knappen, kan du se den udarbejdede CSS-fil.
Billede Accordion med radio knapper
Denne smukke billedkragspel bruger den samme radioknappen metode, men i stedet for etiketter, udvikleren her brugt figcaption HTML tag at opnå accordeonadfærd.
CSS er noget anderledes, hovedsagelig fordi fanerne ikke er placeret lodret, men horisontalt. Udvikleren benyttede element + element CSS vælgeren (der blev brugt i det foregående tilfælde til at vælge vinklerne) for at sikre, at kanterne af de overdækkede billeder stadig forbliver synlige.
Læs den detaljerede vejledning om, hvordan du opretter denne elegante CSS-eneste accordeon.
2. Afkrydsningsfeltet Metode
Afkrydsningsfeltet anvender indtastningstasten i afkrydsningsfeltet i stedet for på radioknappen. Når brugeren vælger en fane, kontrollerer de i det væsentlige den tilsvarende afkrydsningsfelt.
Forskellen i forhold til radioknappen er, at den er muligt at åbne flere end en fane på samme tid, ligesom det er muligt at tjekke mere end en afkrydsningsfelter inde i en formular.
På den anden side lukker fanerne ikke sig selv, når brugeren klikker på en anden. Logikken i HTML er den samme som før, bare i dette tilfælde skal du bruge afkrydsningsfeltet for input type.
Indhold Titel (brug ikke h1 tag her)
Nogle indhold ...
p>
Fast højde afkrydsningsfelt
Hvis du vil have faner med fast højdeindhold, er logikken i CSS stort set det samme som i knappen for radioknappen. Det er bare inputtypen, der er ændret fra radio til afkrydsningsfelt. I denne Codepen-pen kan du se koden.
Fluid Højde afkrydsningsfelt Accordion
Når flere end en fane er åben på samme tid, kan visning af flade højdefaner påvirke brugeroplevelsen negativt, da accordeonets højde kan vokse betydeligt. Dette kan forbedres, hvis du Skift den faste højde til væskens højde; det betyder at højden på de åbne faner udvides eller krympes i overensstemmelse med størrelsen af det indhold, de holder.
For at gøre det skal du ændre den faste højde på faneindholdet til en maksimal højde, og udnytte relative enheder:
input: tjekket ~ .tab-indhold max-højde: 50em;
Hvis du bedre vil forstå, hvordan denne metode virker, kan du kigge på denne Codepen.
3. Målmetoden
: Målet er en af CSS3s pseudo-selektorer. Med sin hjælp kan du linke et HTML-element til et anker-tag på følgende måde:
Titel på fanen
Indholdet af fanen
Når brugeren klikker på titlen på en fane, åbnes hele sektionen takket være :mål pseudo-vælger, og URL'en ændres også til følgende format: www.some-url.com/#tab-1.
Den åbne fane kan styles i CSS ved hjælp af afsnit: mål ... Herske. Vi har en fantastisk tutorial her på hongkiat om hvordan du kan skabe flotte CSS-kun accordeon med :mål metode i både lodrette og vandrette layouter.
Den største mangel på :mål metode er det det ændrer webadressen, når brugeren klikker på fanerne. Dette påvirker browserens historie, og browserens tilbageknap vil ikke tage brugeren til den forrige side, men til akkordeonets tidligere tilstand.
4. Den: sværmetode
Denne sidste mangel kan overvindes, hvis vi udnytter : hover CSS pseudo-vælger i stedet for :mål, men i dette tilfælde reagerer fanerne ikke på kliket, men til svævebegivenheden. Tricket her er, at du skal enten skjule de uhørte elementer, eller reducere deres bredde eller højde - afhængigt af layoutet af fanerne
Det hoverede element skal synliggøres eller indstilles til fuld bredde / højde for at gøre harmonikonen til at fungere.
Følgende 3 CSS-only accordions blev alle lavet med: svingemetode, klik på linkene under skærmbillederne for at se koden.
Horisontalt billede akkordion
Skewed Accordion
Hover-Activated Accordion Med Default State
