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 dragspel endast för CSS ä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,
märka. Iterera processen för valfritt antal vanliga frågor.
<head>
<link rel="stylesheet" href="https://ipotek.net/hur-man-gor-ett-dragspel-med-html-och-css/[path to CSS file]" />
</head>
<body>
<details open>
<summary>FAQ 1</summary>
<div class="description">
<p>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!</p>
</div>
</details>
<details>
<summary>FAQ 2</summary>
<div class="description">
<p>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 consequatur. </p>
</div>
</details>
<details>
<summary>FAQ 3</summary>
<div class="description">
<p>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!</p>
</div>
</details></body>
Styling av dragspelet
Du kan styla dragspelet genom att justera bakgrundsfärg, gränsradie, marginal, stoppning, etc.
body {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
max-width: 30rem;
margin: 1.5rem auto;
}summary {
font-weight: 600;
color: rgb(255, 255, 255);
background-color: rgb(7, 185, 255);
padding: 1.2rem;
margin-bottom: 1.2rem;
border-radius: 0.5rem;
cursor: pointer;
}
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 hjälp av 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 ett HTML-formulär.
HTML
<head>
<link rel="stylesheet" href="https://ipotek.net/hur-man-gor-ett-dragspel-med-html-och-css/[path to CSS file]" />
</head>
<body>
<h1>Custom CSS Only Accordion (FAQ)</h1>
<h2>Using Checkbox method</b></h2>
<div class="faq-box">
<div class="faq">
<input type="checkbox" id="faq1">
<label class="faq-label" for="faq1">How to build a custom accordion using CSS only?</label>
<div class="faq-content">
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.
</div>
</div>
<div class="faq">
<input type="checkbox" id="faq2">
<label class="faq-label" for="faq2">How to change the height of pseudo-elements?</label>
<div class="faq-content">
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.
</div>
</div>
</div>
</body>
Allmän CSS
Applicera den grundläggande CSS på kroppen.
body {
color: #502c2c;
background: #f1edec;
padding: 1.2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 45rem;
margin: 0 auto;
font-size: 1.2rem;
}
Styling av dragspelet
Göm först kryssrutorna genom att ändra inmatningen.
/* Hiding the checkboxes or radio button*/
input {
position: absolute;
opacity: 0;
z-index: -1;
}
Nu, styla dragspelet. Du kan lägga till en::efter pseudo-element för + skylt. Du kan hänvisa till ett referensdiagram för teckenenhet och använda valfri entitetsomvandlingskalkylator för att hitta CSS-värdet för ett numeriskt värde. Här är CSS-värdet för + är
