4 sätt att skapa fantastiska CSS-Only Accordions
Innehållsdragelser gör ett användbart designmönster. Du kan använda dem för många olika saker: för menyer, listor, bilder, artikelutdrag, textklipp och till och med videor
De flesta dragspel där ute är beroende av JavaScript, huvudsakligen på jQuery, men eftersom användningen av avancerade CSS3-tekniker blev utbredd, kan vi också hitta bra exempel på det Använd bara HTML och CSS, som gör dem tillgängliga i miljöer med inaktiverad JavaScript.
Att skapa CSS-bara dragspel kan vara en knepig uppgift, så i det här inlägget kommer vi att försöka förstå de viktigaste begreppen utvecklare använder när de behöver skapa en.
När du skapar CSS-bara flikar finns det oftast två huvudsakliga tillvägagångssätt, var och en av dem har två vanliga användningsfall. Det första tillvägagångssättet utnyttjar dolda formelement, medan den andra använder sig av CSS pseudo-selektorer.
1. Radioknappsmetoden
Radioknappsmetoden lägger till en dold radioinmatning och en motsvarande etiketttagning till varje flik i dragspelet. Logiken är enkel: När användaren väljer en flik, kontrollerar de i grunden den radioknapp som tillhör den fliken, på samma sätt när de fyller i ett formulär. När de klickar på nästa flik i dragspelet väljer de nästa alternativknapp osv.
I denna metod, endast en flik kan vara öppen på samma gång. HTML-logiken ser något ut så här:
Innehållstitel (använd inte h1-taggen här)
Något innehåll ...
p>
Du behöver lägg till ett separat radiomärkningspar för varje flik i dragspelet. HTML ensam kommer inte att ge önskat beteende, du måste också lägga till lämpliga CSS-regler, låt oss se hur du kan utföra det.
Fasta vertikala flikar
I den här lösningen (se bildskärmen nedan) gömde utvecklaren radioknappen med hjälp av display: none; regel, då gav han en relativ position till etikettetiketten som innehar titeln på varje flik och en absolut position till motsvarande etikett: efter pseudo-elementet.
Den senare håller handtaget markerat med en grön + skylt som öppnar flikarna. De slutna flikarna använder också ett handtag markerat med grönt “-” tecken. I CSS väljs de slutna flikarna med hjälp av element + elementväljaren.
Du måste också ge innehållet på den öppna fliken en fast höjd. För att göra detta väljer du den öppna flikens kropp (markerad med flikinnehållsklassen i HTML-koden ovan) med hjälp av elementet 1 ~ element2 CSS-väljaren.
Den grundläggande logiken för CSS här är följande:
ingång [typ = radio] display: none; etikett position: relativ; display: block; etikett: efter innehåll: "+"; position: absolut; höger: 1em; inmatning: markerad + etikett: efter innehåll: "-"; inmatning: kontrollerat ~ .tab-innehåll höjd: 150px;
Du kan kolla på hela CSS här på Codepen. CSS är ursprungligen skrivet i Sass, men om du klickar på “Visa kompilerade” knappen, kan du se den sammanställda CSS-filen.
Bilddragning med radioknappar
Denna vackra bildspelet använder samma radioknappsmetod, men istället för etiketter, utvecklaren här använde figcaption HTML-taggen för att åstadkomma dragspelets beteende.
CSS är något annorlunda, främst eftersom flikarna i detta fall inte placeras vertikalt men horisontellt. Utvecklaren använde elementet + element CSS-väljaren (som användes i föregående fall för att välja växlarna) för att säkerställa att kanterna på de täckta bilderna fortfarande är synliga.
Läs den detaljerade guiden om hur du skapar det här eleganta CSS-enda dragspelet.
2. Checkboxmetoden
I kryssrutan används rutan för inmatning i rutan istället för radioknappen. När användaren väljer en flik kontrollerar de i grunden den motsvarande kryssrutan.
Skillnaden jämfört med radioknappsmetoden är att den är möjligt att öppna mer än en flik samtidigt, precis som det är möjligt att kolla mer än en kryssrutor i ett formulär.
Å andra sidan kommer flikarna inte att stänga sig själva när användaren klickar på en annan. HTML-logiken är densamma som tidigare, bara i det här fallet måste du använda kryssrutan för inmatningstyp.
Innehållstitel (använd inte h1-taggen här)
Något innehåll ...
p>
Fasta höjdrutan Accordion
Om du vill ha flikar med höjdhöjd, är logiken i CSS ganska mycket densamma som i alternativknappen. Det är bara inmatningstypen som har ändrats från radio till kryssrutan. I den här Codepen-pennan kan du titta på koden.
Fluid Höjd Checkbox Accordion
När fler än en flik är öppen samtidigt kan det hända att flikar med fasta höjningar påverkar användarupplevelsen negativt eftersom dragspelets höjd kan öka betydligt. Detta kan förbättras om du byt den fasta höjden till vätskans höjd; det betyder att höjden på de öppna flikarna expanderar eller krympar i enlighet med storleken på det innehåll de håller.
För att göra så behöver du Ändra den fasta höjden för flikinnehållet till en maxhöjd, och utnyttja relativa enheter:
input: checked ~ .tab-innehåll maxhöjd: 50em;
Om du vill förstå hur den här metoden fungerar kan du kolla på denna Codepen.
3. Målmetoden
: Målet är en av CSS3: s pseudo-väljare. Med hjälp kan du länka ett HTML-element till en ankare på följande sätt:
Titel på fliken
Innehållet i fliken
När användaren klickar på titeln på en flik öppnas hela avsnittet tack vare :mål pseudo-väljaren, och URL-adressen ändras också till följande format: www.some-url.com/#tab-1.
Den öppna fliken kan stylas i CSS med hjälp av avsnitt: mål ... regel. Vi har en bra handledning här på hongkiat om hur du kan skapa fina CSS-bara dragspel med :mål metod i både vertikala och horisontella layouter.
Den största bristen på :mål metod är det Det ändrar webbadressen när användaren klickar på flikarna. Detta påverkar webbläsarens historia och webbläsarens tillbaka-knapp tar inte användaren till föregående sida, utan till dragspelets tidigare tillstånd.
4. Den: svävarmetoden
Denna senare brist kan övervinnas om vi använder :sväva CSS pseudo-väljare istället för :mål, men i detta fall kommer inte flikarna att reagera på klicket men till svängningsevenemanget. Tricket här är det du behöver antingen göm de obehagliga elementen, eller minska bredden eller höjden - beroende på flikens layout
Det svävade elementet måste synas eller ställas in i full bredd / höjd för att få dragspelet att fungera.
Följande 3 CSS-bara dragspel var alla gjorda med: svängmetoden, klicka på länkarna nedanför skärmbilderna för att titta på koden.
Horisontell bilddragning
Skewed Accordion
Hover-Activated Accordion Med Default State
