Hoe CSS-Based Content Accordion te maken
In de tutorial van vandaag gaan we leren hoe we een kunnen maken horizontale en verticale inhoudaccordeon door alleen CSS3 te gebruiken. Er zijn veel jQuery-plugins die dit werk voor u kunnen doen, maar wat doet u als de bezoeker Javascript heeft uitgeschakeld, dan werkt de accordeon niet correct. Als je accordeon puur in CSS is, werkt deze voor al je bezoekers.
We gaan een maken horizontaal en verticaal inhoud accordeon. Als u op de koptekst klikt, wordt de dia geopend met de volledige inhoud. Hier ziet u een snel voorbeeld (schermafbeeldingen) hoe ze eruit zien.
Vind je het leuk wat je ziet? Laat de codering beginnen!
1. HTML en inhoud voorbereiden
Om te beginnen gaan we de HTML voor de accordeon maken.
De structuur heeft een container nodig div en heb dan een sectie voor elke dia in de accordeon. In dit voorbeeld hebben we 5 dia's. Elk van de dia's krijgt een titel en een alinea voor de inhoud.
Over ons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
Diensten
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
Portefeuille
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
Contact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
Nu we onze dia's hebben, kunnen we de accordeon gaan stijlen.
2. CSS-styling
Eerst moeten we de inhoud stijlen div van de accordeon. Dit geeft ons een idee hoe elk van de dia's en elk van de koppen moet worden weergegeven.
/ * Definieer accordeonvak * / .accordion width: 830px; overloop verborgen; marge: 10 px automatisch; color: # 474747; background: # 414141; padding: 10px;
Vervolgens gaan we de koppen maken voor elk van de dia's.
.accordeongedeelte float: links; overloop verborgen; color: # 333; cursor: wijzer; achtergrond: # 333; margin: 3px; .accordion sectie: hover background: # 444;
We stellen de achtergrondkleur in op donkergrijs op het gedeelte dat de kop is waar de bezoekers op klikken om de dia weer te geven. We gebruiken dit gedeelte voor zowel de kop als de inhoud, wat betekent dat we minder HTML kunnen gebruiken en de titel van de dia kunnen gebruiken als de kop van de inhoud.
.accordeonsectie p display: none;
Op het moment dat alle dia's worden gesloten, moeten we ervoor zorgen dat de alinea uit het zicht is verborgen totdat de dia is geopend. Stel de alinea daarom nu in op Geen.
.accordeon sectie: na positie: relatief; font-size: 24px; color: # 000; font-weight: bold; .accordion sectie: nth-child (1): after content: '1'; .accordion sectie: nth-child (2): after content: '2'; .accordion sectie: nth-child (3): after content: '3'; .accordion sectie: nth-child (4): after content: '4'; .accordion sectie: nth-child (5): after content: '5';
Als de dia's zijn gesloten, willen we een nummer onder aan de kop weergeven om aan te geven op welke nummer-dia we staan. Hiervoor gaan we CSS gebruiken om inhoud toe te voegen na de kop van de sectie, dit kan gedaan worden door de :na pseudo-klasse selector.
Nu hebben we de kop voor de dia gemaakt. We kunnen de klikgebeurtenis maken om de dia in de accordeon weer te geven. Maar er is een probleem, CSS heeft geen klikgebeurtenis, daarom wordt de accordeon normaal gesproken gemaakt met behulp van jQuery, zodat we een klikgebeurtenis aan de koptekst kunnen koppelen.
We moeten de klikgebeurtenis in CSS nabootsen die kan worden gedaan door de :doelwit pseudo-klasse selector.
3. Gebruik :doelwit pseudo-klasse selector
:doelwit staat ons toe om de fragmentidentificatie te vormen. Soms gebruiken we een ankertag op pagina om naar een plaats op de pagina te wijzen. Door op de link te klikken, de ID kaart in het ankertag wordt het doelwit en je kunt dit stylen met behulp van de :doelwit keuzeschakelaar.
Om dit toe te voegen aan de accordeon moeten we een link toevoegen rond de kop die wijst naar een ID kaart van de dia.
Over ons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiamus placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent bij magna non massa dapibus scelerisque in eu lorem.
.accordeonsectie: doelwit background: #FFF; padding: 10px; .accordion sectie: target: hover background: #FFF; .ordesectie: doel h2 width: 100%; .ordesectie: doel h2 a kleur: # 333; padding: 0; .accordion sectie: target p display: block; .accordeon sectie h2 a opvulling: 8px 10px; display: block; font-size: 16px; font-weight: normal; kleur: #eee; text-decoration: none;
De bovenstaande code zal de grootte van de dia aanpassen aan de rest van de accordeon en verandert de achtergrondkleur in wit. De alinea is verborgen, dus nu op doel moeten we de alinea weergeven.
Als u nu op de kop van de accordeon klikt, verandert de dia van stijl om de inhoud van de dia weer te geven.
4. Horizontale accordeon
De bovenstaande code zal de algemene accordeon creëren, nu kunnen we beginnen met het maken van de CSS-wijzigingen voor de verschillen tussen de horizontale en verticale accordeon. Beide accordeons hebben dezelfde functionaliteit, maar de vormgeving van de koppen zou anders zijn.
.horizontale doorsnede breedte: 5%; hoogte: 250 pixels; -moz-overgang: breedte 0,2s gemak; -webkit-overgang: breedte 0,2s uitval; -o-overgang: breedte 0,2s gemak; overgang: breedte 0,2s uitval;
Eerst stellen we de breedte van het kopgedeelte tot 5%, dus het is een gesloten dia. Aangezien de sectie zowel de kop als de inhoud van de dia is, moeten we de animatie toevoegen om de inhoud weer te geven met behulp van de eigenschap transition.
/ * Plaats het nummer van de dia * / .horizontal sectie: after top: 140px; left: 15px;
De positie van het nummer op de dia is dezelfde positie op elke gesloten kop, deze zijn anders geplaatst dan de verticale koppen.
/ * Kop van gesloten dia * / .horizontale sectie h2 -webkit-transform: roteren (90 graden); -moz-transform: draai (90deg); -o-transform: roteren (90 graden); transformeren: roteren (90 graden); width: 240px; position: relative; left: -100px; top: 85px; / * Op muis over open dia * / .horizontal: doel width: 73%; Hoogte: 230px; .horizontal: target h2 top: 0px; left: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: roteer (0deg); transformeren: draaien (0deg);
De bovenstaande code zal de grootte van de dia aanpassen aan de rest van de accordeon. De kop is verticaal gedraaid om langs de kop te lopen, maar nu de dia open is, moeten we de tekst terug in de horizontale positie zetten door de tekst terug naar 0 graden te draaien.
5. Verticale accordeon
De verticale accordeon werkt op dezelfde manier als de horizontale accordeon, behalve dat we de hoogte in plaats van de breedte en we hoeven de uitlijning van de tekst niet te veranderen.
.verticale doorsnede breedte: 100%; hoogte: 40px; -webkit-overgang: lengte 0,2s uitval; -moz-overgang: hoogte 0,2s gemak; -o-overgang: hoogte 0,2s gemak; overgang: hoogte 0,2s uitloop; / * Hoogte van de dia instellen * / .vertical: target height: 250px; width: 97%;
Op de doelwit gebeurtenis van de verticale accordeon gaan we veranderen hoogte van de kop om de dia weer te geven.
.verticale doorsnede h2 positie: relatief; left: 0; top: -15px; / * Plaats de positie van het nummer op de slide * / .vertical-sectie: after top: -60px; left: 810px; .verticale sectie: doel: na left: -9999px;
Het bovenstaande zal de positie van de koptekst op de gesloten dia. Met de gesloten dia moeten we de positie van het nummer dat zich rechts van de accordeon bevindt. Wanneer de dia open is, moeten we dit nummer op de kop verbergen wanneer het doelwit is ingesteld, zodat we de linkerpositie van het scherm wijzigen.
Als u nu op de kop van de accordeon klikt, verandert de dia van stijl om de inhoud van de dia weer te geven.
Opmerking van de uitgever: Dit bericht is geschreven door Paul Underwood voor Hongkiat.com. Paul is PHP Web Developer uit Bristol, Verenigd Koninkrijk. Hij schrijft tutorials over Web Development: belangrijkste onderwerpen zijn onder meer PHP, jQuery, CSS3 en HTML5. Hij neemt ook nuttige codefragmenten op Paulund.co.uk op.
