CSS-dragspel används ofta för expanderbara och hopfällbara menyer, utdrag, bilder, videor, vanliga frågor, listor och artikelutdrag. Du kan enkelt skapa dem med HTML, CSS och JavaScript (eller jQuery). Att skapa enbart CSS-dragspel är lite av en utmanande uppgift, men det är väldigt användbart i JavaScript-inaktiverade miljöer.

I den här guiden kommer du att lära dig ett steg-för-steg tillvägagångssätt för att skapa ett endast CSS-dragspel.

Bygga grundläggande dragspel endast med HTML

Om din prioritet är att skapa ett tillgängligt dragspel med HTML, och taggar är vägen att gå. Det spelar ingen roll vilket programmeringsspråk du använder, det endast HTML-dragspelet förblir intakt. Skapa en tagga som förälder och skriv in frågan i en märka. Skriv ett beskrivande svar i a märka. Iterera processen för valfritt antal vanliga frågor.

Vanliga frågor 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



FAQ 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. 






Vanliga frågor 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!

Styling av dragspelet

Du kan styla dragspelet genom att justera bakgrundsfärg, gränsradie, marginal, stoppning, etc.

kropp {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genève, Verdana, sans-serif;
 max-bredd: 30rem;
 marginal: 1,5 rem auto;
}
sammanfattning {
 teckensnittsvikt: 600;
 färg: rgb (255, 255, 255);
 bakgrundsfärg: rgb (7, 185, 255);
 stoppning: 1,2rem;
 marginal-botten: 1,2rem;
 gränsradie: 0,5 rem;
 markör: pekare;
}

Produktion:

Den enda begränsningen är att du inte kommer att ha kontroll över varje del av koden. HTML-strukturen kan ändras, men du kan inte skapa ett anpassat dragspel. Låt oss därför bygga en anpassad FAQ-sektion med avancerad CSS.

Bygg din anpassade FAQ-sektion

Det finns två populära metoder för att skapa ett anpassat dragspel endast för CSS. Du kan antingen använda kryssrutor eller alternativknappar; vi kommer att förklara båda metoderna.

Använda kryssrutemetoden

Checkbox-metoden använder kryssruta som ingångstyp. Närhelst en användare väljer en flik markerar de kryssrutan och den öppnas. Du kan öppna flera flikar samtidigt med hjälp av kryssrutemetoden, liknande hur du kan markera mer än en kryssruta i en HTML-formulär.

HTML

Anpassad CSS Endast dragspel (FAQ)

Använder checkbox-metoden






Hur bygger man ett anpassat dragspel med endast 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
 necessitatibus nihil.









Hur ändrar man höjden på pseudoelement?


 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.

Allmän CSS

Applicera den grundläggande CSS på kroppen.

kropp {
 färg: #502c2c;
 bakgrund: #f1edec;
 stoppning: 1,2rem;
 font-family: 'Segoe UI', Tahoma, Genève, Verdana, sans-serif;
 max-bredd: 45rem;
 marginal: 0 auto;
 teckenstorlek: 1,2rem;
}

Styling av dragspelet

Göm först kryssrutorna genom att ändra inmatningen.

/* Döljer kryssrutorna eller alternativknappen*/
inmatning {
 position: absolut;
 opacitet: 0;
 z-index: -1;
}

Nu, styla dragspelet. Du kan lägga till en::efter pseudo-element för + skylt. Du kan hänvisa till a Referensdiagram för karaktär Entitet och använd någon Entity Conversion Calculator för att hitta CSS-värdet för ett numeriskt värde. Här är CSS-värdet för + är \002B.

/* Dragspelsstilar */
.faq {
 färg: #ffe3e3;
 marginal-botten: 3rem;
}
.faq-label {
 teckenstorlek: 1,5 rem;
 display: flex;
 align-items: center;
 motivera-innehåll: mellanslag-mellan;
 stoppning: 1em;
 bakgrund: #b61818;
 font-weight: fet;
 markör: pekare;
 användarval: ingen;
}
.faq-label:: efter {
 innehåll: '\002B';
 stoppning: 0,51rem;
 transform: skala (1,8);
 text-align: center;
 övergång: alla 0,35s;
}
.faq-content {
 max-höjd: 0;
 stoppning: 0 1em;
 färg: #2c3e50;
 bakgrund: vit;
 övergång: alla 0,35s;
 display: ingen;
}

Låt oss nu lägga till funktionalitet till dragspelet med hjälp av angränsande och attributväljare. Här, \2013 är CSS-värde för –, det numeriska värdet representerar –.

input: checked + .faq-label {
 bakgrund: #8f1414;
}
input: checked + .faq-label:: efter {
 innehåll: '\2013';
 transform: skala (1,5);
}
input: checked ~ .faq-content {
 max-höjd: 100vh;
 stoppning: 1em;
 display: block;
 övergång: alla 0,35s;
}

Produktion:

Använda radioknappmetoden

Radioknappmetoden har en ingångstyp inställd på radio. När användaren klickar på en flik öppnas den dolda alternativknappen som motsvarar den. När du klickar på nästa flik stängs föregående flik direkt. Du kan bara öppna en flik åt gången med alternativknappsmetoden.

HTML

Anpassad CSS Endast dragspel (FAQ)

Använda radioknappmetoden






Hur skapar man dragspel med 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.









Hur skapar man ett anpassat dragspel med endast CSS?


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









Vad betyder dragspelsstil?


 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? Ja, nej!









Stäng alla ×

CSS

Kopiera ovanstående CSS från Checkbox-metoden eftersom båda metoderna endast skiljer sig från strukturell synvinkel. Du kanske märker att det finns en flik öppen hela tiden. Detta händer eftersom du inte kan avmarkera alternativknappar som kryssrutor. För att åstadkomma detta, lägg till CSS-koden nedan till en "Stäng alla"-radioknapp utan någon beskrivning.

/* Stänger alla */
.faq-label {
 position: relativ;
}
.faq-close {
 display: inline-block;
 stoppning: 1rem;
 teckenstorlek: 1rem;
 bakgrund: #b61818;
 markör: pekare;
 position: absolut;
 vänster: 64rem;
}

Produktion:

Fortsätt experimentera och lägg till animationer

Det finns en enkel logik bakom dragspel: när du klickar på en meny visas dess dolda innehåll. Eftersom du nu vet hur man skapar ett dragspel är det hög tid att implementera och experimentera med ditt lärande. Du kan bygga horisontella dragspel för att förbättra designen, särskilt när du visar bilder. Experimentera med koden genom att justera övergångseffekten med hjälp av keyframe-animationer.

Naincy Mourya (16 publicerade artiklar)

Naincy specialiserar sig på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologier.

Mer från Naincy Mourya