4 manieren om Awesome CSS-Only-accordeons te maken
Content-accordeons vormen een nuttig ontwerppatroon. Je kunt ze voor veel verschillende dingen gebruiken: voor menu's, lijsten, afbeeldingen, artikelfragmenten, tekstfragmenten en zelfs video's
De meeste accordeons vertrouwen daar op JavaScript, voornamelijk op jQuery, maar sinds het gebruik van geavanceerde CSS3-technieken wijdverspreid is geworden, kunnen we daar ook leuke voorbeelden van vinden gebruik alleen HTML en CSS, die ze toegankelijk maken in omgevingen met uitgeschakeld JavaScript.
Het maken van alleen-CSS-accordeons kan een lastige taak zijn, dus in deze post zullen we proberen inzicht krijgen in de belangrijkste concepten die ontwikkelaars gebruiken wanneer ze er een moeten maken.
Bij het maken van CSS-only tabs zijn er meestal twee hoofdbenaderingen, die elk twee gevallen van frequent gebruik hebben. De eerste benadering maakt gebruik van verborgen vormelementen, terwijl de tweede gebruik maakt van CSS pseudo-selectors.
1. De methode van de radioknop
De methode met de radioknop voegt een verborgen radio-ingang en een overeenkomstig label toe aan elk tabblad van de accordeon. De logica is simpel: wanneer de gebruiker een tabblad selecteert, controleren ze in principe het keuzerondje dat bij dat tabblad hoort, op dezelfde manier wanneer ze een formulier invullen. Wanneer ze op het volgende tabblad van de accordeon klikken, selecteren ze het volgende keuzerondje enzovoort.
In deze methode, er kan slechts één tabblad geopend zijn tegelijkertijd. De logica van de HTML ziet er ongeveer zo uit:
Inhoudstitel (gebruik hier geen h1-tag)
Sommige inhoud ...
p>
Je moet voeg een afzonderlijk paar radio-labels toe voor elk tabblad in de accordeon. Alleen de HTML geeft niet het gewenste gedrag, je moet ook de juiste CSS-regels toevoegen, laten we eens kijken hoe je dat kunt bereiken.
Verticale tabbladen met vaste hoogte
In deze oplossing (zie de onderstaande schermafbeelding) verborg de ontwikkelaar het keuzerondje met behulp van de Geen weergeven; regel, dan gaf hij een relatieve positie aan het labellabel dat de titel van elk tabblad bevat, en een absolute positie ten opzichte van het overeenkomstige label: na pseudo-element.
De laatste houdt het handvat vast gemarkeerd met een groen + teken dat de tabs opent. De gesloten tabbladen maken ook gebruik van een handvat gemarkeerd met groen “-” borden. In de CSS worden de gesloten tabbladen geselecteerd met behulp van de element + elementselector.
Je moet ook de inhoud van het open tabblad een vaste hoogte geven. Selecteer hiervoor de hoofdtekst van het geopende tabblad (gemarkeerd met de klasse tab-content in de bovenstaande HTML) met behulp van element1 ~ element2 CSS-kiezer.
De basislogica van de CSS hier is de volgende:
invoer [type = radio] weergave: geen; label positie: relatief; weergave: blok; label: after content: "+"; positie: absoluut; rechts: 1em; invoer: aangevinkt + label: na content: "-"; input: checked ~ .tab-content height: 150px;
Je kunt hier de volledige CSS bekijken op Codepen. De CSS is oorspronkelijk geschreven in Sass, maar als u op klikt “Bekijk samengesteld” knop, kunt u het gecompileerde CSS-bestand bekijken.
Beeldacceleratie met radioknoppen
Deze prachtige afbeelding-accordeon maakt gebruik van dezelfde keuzerondjesmethode, maar in plaats van labels, de ontwikkelaar hier gebruikte de HTML-tag figcaption om het accordeongedrag te volbrengen.
De CSS is enigszins anders, voornamelijk omdat in dit geval de tabs niet verticaal maar horizontaal zijn geplaatst. De ontwikkelaar gebruikte de element + element CSS-kiezer (die in het vorige geval werd gebruikt om de schakelaars te selecteren) om ervoor te zorgen dat de randen van de afgedekte afbeeldingen nog steeds zichtbaar blijven.
Lees de gedetailleerde handleiding over het maken van dit elegante CSS-only accordeon.
2. De checkbox-methode
De checkbox-methode maakt gebruik van het checkbox-invoertype in plaats van het keuzerondje. Wanneer de gebruiker een tabblad selecteert, controleren ze in principe het overeenkomstige selectievakje.
Het verschil met de radioknopmethode is dat het dat is mogelijk om meer dan één tabblad tegelijkertijd te openen, net zoals het mogelijk is om meer dan één selectievakjes in een formulier te controleren.
Aan de andere kant sluiten de tabbladen zichzelf niet zelf wanneer de gebruiker op een andere klikt. De logica van de HTML is hetzelfde als voorheen, alleen in dit geval moet u het selectievakje voor het invoertype gebruiken.
Inhoudstitel (gebruik hier geen h1-tag)
Sommige inhoud ...
p>
Selectievakje Vaste hoogte Accordeon
Als u inhoudstabbladen met een vaste hoogte wilt, is de logica van de CSS vrijwel hetzelfde als in de behuizing van de radioknop, het is alleen het invoertype dat is gewijzigd van radio naar selectievakje. In deze Codepen-pen kunt u de code bekijken.
Vloeistofhoogte Checkbox Accordeon
Als er meerdere tabbladen tegelijkertijd open zijn, kan het weergeven van de tabbladen met vaste hoogte een negatieve invloed hebben op de gebruikerservaring, aangezien de hoogte van de accordeon aanzienlijk kan toenemen. Dit kan worden verbeterd als u verander de vaste hoogte in vloeistofhoogte; dat betekent dat de hoogte van de open tabbladen groter of kleiner wordt in overeenstemming met de grootte van de inhoud die ze bevatten.
Om dit te doen moet je wijzig de vaste hoogte van de tabbladinhoud naar een maximale hoogte, en gebruik relatieve eenheden:
input: checked ~ .tab-content max-height: 50em;
Als je beter wilt begrijpen hoe deze methode werkt, kun je deze Codepen bekijken.
3. De: doelmethode
: doel is een van CSS3's pseudo-selectors. Met zijn hulp kunt u een HTML-element koppelen aan een ankertag op de volgende manier:
Titel van het tabblad
Inhoud van het tabblad
Wanneer de gebruiker op de titel van een tabblad klikt, wordt de hele sectie geopend dankzij de :doelwit pseudo-selector, en de URL zal ook worden gewijzigd in de volgende indeling: www.some-url.com/#tab-1.
Het geopende tabblad kan worden opgemaakt in CSS met behulp van de sectie: doel ... regel. We hebben een geweldige tutorial hier op hongkiat over hoe je mooie CSS-only accordeons kunt maken met de :doelwit methode in zowel verticale als horizontale lay-outs.
De belangrijkste tekortkoming van de :doelwit methode is dat het verandert de URL wanneer de gebruiker op de tabs klikt. Dit beïnvloedt de browsergeschiedenis en de terugknop van de browser brengt de gebruiker niet naar de vorige pagina, maar naar de vorige staat van de accordion.
4. De: hover-methode
Deze laatste tekortkoming kan worden overwonnen als we de : hover CSS pseudo-selector in plaats van :doelwit, maar in dit geval reageren de tabbladen niet op de klik, maar op de zweefgebeurtenis. De truc hier is dat je dat moet doen verberg de niet-afgedekte elementen, of verminder hun breedte of hoogte - afhankelijk van de lay-out van de tabbladen
Het zwevende element moet zichtbaar worden gemaakt, of op volledige breedte / hoogte worden ingesteld om de accordeon te laten werken.
De volgende 3 CSS-only-accordeons werden allemaal gemaakt met de: hover-methode, klik op de links onder de schermafbeeldingen om de code te bekijken.
Horizontale beeldacceleratie
Scheve accordeon
Met zwaai geactiveerde accordeon met standaardstatus
