CSS-trekkspill er mye brukt for utvidbare og sammenleggbare menyer, utdrag, bilder, videoer, vanlige spørsmål, lister og artikkelutdrag. Du kan enkelt lage dem ved å bruke HTML, CSS og JavaScript (eller jQuery). Å lage CSS-bare trekkspill er litt av en utfordrende oppgave, men det er veldig nyttig i JavaScript-deaktiverte miljøer.

I denne veiledningen lærer du en trinnvis tilnærming til å lage et trekkspill som kun er for CSS.

Bygge grunnleggende trekkspill med kun HTML

Hvis din prioritet er å lage et tilgjengelig trekkspill ved hjelp av HTML, og tags er veien å gå. Det spiller ingen rolle hvilket programmeringsspråk du bruker, trekkspillet som kun er i HTML forblir intakt. Lage en tagg som forelder og skriv inn spørsmålet i en stikkord. Skriv et beskrivende svar i a stikkord. Gjenta prosessen for et hvilket som helst antall vanlige spørsmål.

Vanlige spørsmål 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer



Vanlige spørsmål 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates konsequatur. 






Vanlige spørsmål 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Styler trekkspillet

Du kan style trekkspillet ved å justere bakgrunnsfarge, grense-radius, margin, polstring, etc.

kropp {
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genève, Verdana, sans-serif;
 maks-bredde: 30rem;
 margin: 1,5rem auto;
}
sammendrag {
 font-vekt: 600;
 farge: rgb (255, 255, 255);
 bakgrunnsfarge: rgb (7, 185, 255);
 polstring: 1,2rem;
 marg-bunn: 1,2rem;
 kantradius: 0,5rem;
 markør: peker;
}

Produksjon:

Den eneste begrensningen er at du ikke vil ha kontroll over hver eneste del av koden. HTML-strukturen kan endres, men du kan ikke lage et tilpasset trekkspill. La oss derfor bygge en tilpasset FAQ-seksjon ved hjelp av avansert CSS.

Bygg din egendefinerte FAQ-seksjon

Det er to populære metoder for å lage et tilpasset CSS-bare trekkspill. Du kan enten bruke avmerkingsbokser eller alternativknapper; vi vil forklare begge metodene.

Bruke avkrysningsboksmetoden

Avmerkingsboksmetoden bruker avmerkingsboksen som inngangstype. Når en bruker velger en fane, merker de av i boksen og den åpnes. Du kan åpne flere faner samtidig ved å bruke avkrysningsboksmetoden, på samme måte som du kan merke mer enn én avmerkingsboks i en HTML-skjema.

HTML

Kun tilpasset CSS trekkspill (FAQ)

Bruker avkrysningsboksmetoden






Hvordan bygge et tilpasset trekkspill med kun CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beatae
 nødvendighet nihil.









Hvordan endre høyden på pseudo-elementer?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

Generell CSS

Bruk grunnleggende CSS på kroppen.

kropp {
 farge: #502c2c;
 bakgrunn: #f1edec;
 polstring: 1,2rem;
 font-family: 'Segoe UI', Tahoma, Genève, Verdana, sans-serif;
 maks-bredde: 45rem;
 margin: 0 auto;
 skriftstørrelse: 1,2rem;
}

Styler trekkspillet

Skjul først avmerkingsboksene ved å endre inndataene.

/* Skjuler avmerkingsboksene eller alternativknappen*/
input {
 posisjon: absolutt;
 opasitet: 0;
 z-indeks: -1;
}

Stil nå trekkspillet. Du kan legge til en::etter pseudo-element for + skilt. Du kan referere til en Character Entity Reference Chart og bruk evt Entitetskonverteringskalkulator for å finne CSS-verdien til en numerisk verdi. Her er CSS-verdien av + er \002B.

/* Trekkspillstiler */
.FAQ {
 farge: #ffe3e3;
 marg-bunn: 3rem;
}
.faq-label {
 skriftstørrelse: 1,5rem;
 display: flex;
 align-items: center;
 rettferdiggjøre-innhold: space-between;
 polstring: 1em;
 bakgrunn: #b61818;
 font-weight: fet;
 markør: peker;
 brukervelg: ingen;
}
.faq-label:: etter {
 innhold: '\002B';
 polstring: 0,51rem;
 transform: skala (1,8);
 tekst-align: center;
 overgang: alle 0,35s;
}
.faq-content {
 maks-høyde: 0;
 polstring: 0 1em;
 farge: #2c3e50;
 bakgrunn: hvit;
 overgang: alle 0,35s;
 display: ingen;
}

La oss nå legge til funksjonalitet til trekkspillet ved å bruke tilstøtende og attributtvelgere. Her, \2013 er CSS-verdi for –, den numeriske verdien som representerer –.

input: checked + .faq-label {
 bakgrunn: #8f1414;
}
input: checked + .faq-label:: etter {
 innhold: '\2013';
 transform: skala (1,5);
}
input: checked ~ .faq-content {
 maks-høyde: 100vh;
 polstring: 1em;
 display: blokk;
 overgang: alle 0,35s;
}

Produksjon:

Bruke radioknappmetoden

Radioknappmetoden har en inngangstype satt til radio. Hver gang brukeren klikker på en fane, åpnes den skjulte alternativknappen som tilsvarer den fanen. Når du klikker på neste fane, lukkes den forrige fanen umiddelbart. Du kan bare åpne én fane om gangen ved å bruke alternativknappmetoden.

HTML

Kun tilpasset CSS trekkspill (FAQ)

Bruke radioknappmetoden






Hvordan lage trekkspill ved hjelp av radioknappmetoden?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Hvordan lage et tilpasset trekkspill med kun CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Hva betyr trekkspillstil?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Vel, ikke!









Lukk alle ×

CSS

Kopier CSS-en ovenfor for avkrysningsboksmetoden, da begge metodene kun er forskjellige fra strukturelle synspunkter. Du legger kanskje merke til at det er én fane åpen hele tiden. Dette skjer fordi du ikke kan fjerne merkingen av radioknapper som avmerkingsbokser. For å oppnå dette, legg til CSS-koden nedenfor til en "Lukk alt"-radioknapp uten noen beskrivelse.

/* Avslutter alle */
.faq-label {
 stilling: pårørende;
}
.faq-close {
 display: inline-blokk;
 polstring: 1rem;
 skriftstørrelse: 1rem;
 bakgrunn: #b61818;
 markør: peker;
 posisjon: absolutt;
 venstre: 64rem;
}

Produksjon:

Fortsett å eksperimentere og legg til animasjoner

Det er en enkel logikk bak trekkspill: Når du klikker på en meny, vises det skjulte innholdet. Siden du nå vet hvordan du lager et trekkspill, er det på høy tid å implementere og eksperimentere med læringen din. Du kan bygge horisontale trekkspill for å forbedre designet, spesielt når du viser bilder. Eksperimenter med koden ved å justere overgangseffekten ved å bruke keyframe-animasjoner.

Naincy Mourya (16 artikler publisert)

Naincy spesialiserer seg på å bygge svært responsive nettsteder og effektiv innholdsstrategi sammen med nettkopier. Hun er en freelance tech-skribent som holder et skarpt øye med trendende teknologier.

Mer fra Naincy Mourya