Sådan oprettes CSS-baseret indholdsoverdragelse
I dagens vejledning skal vi lære, hvordan vi kan skabe en vandret og lodret indholdstraktion ved blot at bruge CSS3. Der er mange jQuery-plugins ud, der kan gøre dette job til dig, men hvad gør du, hvis den besøgende har Javascript slukket, så vil akkordionen ikke fungere korrekt. Hvis din accordeon er udelukkende i CSS så vil det fungere for alle dine besøgende.
Vi skal skabe en vandret og lodret indhold harmonika. Når du klikker på overskriften, åbnes diaset med det fulde indhold, og her er et hurtigt eksempel (skærmbilleder), hvordan de ser ud.
Ligesom hvad du ser? Lad kodningen begynde!
1. Forberedelse af HTML og indhold
Til at begynde med skal vi oprette HTML for accordeonet.
Strukturen har brug for en beholder div og så har a afsnit for hvert dias i harmonika. I dette eksempel vil vi have 5 dias. Hvert af diasene har en titel og et afsnit til indholdet.
Om os
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
Services
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
Blog
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
Portefølje
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
Kontakt
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
Nu har vi vores lysbilleder, vi kan begynde at style harmonika.
2. CSS Styling
Først skal vi style den indeholdende div af accordeonet. Dette giver os en ide om, hvordan man viser hvert enkelt dias og hver af overskrifterne.
/ * Definer akkordionsboks * / .accordion width: 830px; overflow: hidden; margin: 10px auto; color: # 474.747; baggrund: # 414.141; padding: 10px;
Dernæst skal vi oprette overskrifterne for hver enkelt dias.
.accordeon sektion float: left; overflow: hidden; color: # 333; cursor: pointer; baggrund: # 333; margin: 3px; .accordion: hover background: # 444;
Vi indstiller baggrundsfarven til at være mørkegrå i sektionen for at være overskriften, hvor de besøgende vil klikke for at få vist diaset. Vi bruger dette afsnit til både overskriften og indholdet, hvilket betyder at vi kan bruge mindre HTML og genbruge titlen på diaset som indholdets overskrift.
.accordeon sektion p display: none;
I øjeblikket er alle diaserne lukkede, så vi skal sørge for, at stykket er skjult fra visning, indtil diaset er åbent, så indstil nu visningen af stykket til ingen.
.accordeon sektion: efter position: relative; font-size: 24 px; color: # 000; font-weight: bold; .afsnit: nth-barn (1): efter indhold: '1'; .afsnit: nth-barn (2): efter indhold: '2'; .afsnit: nth-barn (3): efter indhold: '3'; .afsnit: nth-barn (4): efter indhold: '4'; .afsnit: nth-barn (5): efter indhold: '5';
Med slides lukket, ønsker vi at vise et nummer nederst på overskriften for at sige, hvilket nummer lysbillede vi er på. Til dette vil vi bruge CSS til at tilføje indhold efter overskriftets overskrift, dette kan gøres ved at bruge :efter pseudoklassevælger.
Nu har vi lavet overskriften til diaset, vi kan få klikhændelsen til at vise diaset i accordeonet. Men der er et problem, CSS har ikke en klikhændelse, og derfor er harmonikaen normalt oprettet ved hjælp af jQuery, så vi kan vedhæfte et klikhændelse til overskriften.
Vi skal efterligne klikhændelsen i CSS, som kan gøres ved at bruge :mål pseudoklassevælger.
3. Brug :mål pseudoklassevælgeren
:mål tillader os at style fragmentidentifikatoren. Nogle gange bruger vi et anker-tag på siden til at pege på et sted på siden. Ved at klikke på linket id i ankeretiket bliver målet og du kan style dette ved at bruge :mål vælgeren.
For at tilføje dette til harmonika skal vi tilføje et link omkring overskriften peger på en id af diaset.
Om os
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Der er mulighed for at oprette egne lokaler. Alquam semper mauris er lige så god som i lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Tilmelde dig ikke bare, men ikke min. 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. Præsentere ved magna ikke masse dapibus scelerisque i eu lorem.
.Accordion: mål background: #FFF; padding: 10px; .accordion: target: hover background: #FFF; .afsnit: mål h2 bredde: 100%; .accord sektion: mål h2 a farve: # 333; padding: 0; .accordion: target p display: block; .accordion h2 a polstring: 8px 10px; display: block; font-size: 16px; font-weight: normal; farve: #eee; tekst-dekoration: ingen;
Ovennævnte kode ændrer størrelsen på diaset for at passe til resten af harmonika og ændrer baggrundsfarven til hvid. Stykket var skjult, så nu på målet skal vi vise stykket.
Nu, når du klikker på akkordets overskrift, ændrer diaset stilen for at vise indholdet af diaset.
4. Horisontal accordion
Ovennævnte kode vil skabe den generelle accordeon nu kan vi begynde at gøre CSS ændringer for forskellene mellem det horisontale og det lodrette accordeon. Begge disse accordeoner har samme funktionalitet, men overskriftstyping ville være anderledes.
.vandret afsnit bredde: 5%; højde: 250px; -moz-overgang: width 0.2s easy-out; -webkit-overgang: width 0.2s easy-out; -o-overgang: width 0.2s udlæsning; overgang: bredde 0.2s lethed;
Først satte vi bredde af overskriftsafsnittet til 5%, så det er et lukket objektglas. Da sektionen er både overskriften og indholdet til diaset, skal vi tilføje animationen for at vise indholdet ved at bruge overgangseiendommen.
/ * Placer nummeret på dias * / .horisontalt afsnit: efter top: 140px; venstre: 15px;
Placeringen af tallet på diaset vil være den samme position på hver lukket overskrift, de er placeret forskelligt i forhold til de lodrette overskrifter.
/ * Overskrift af lukket dias * /. Horisontalt afsnit h2 -webkit-transform: roter (90deg); moz-transformation: rotere (90deg); -o-transformer: roter (90deg); transformere: rotere (90deg); bredde: 240 px; position: relative; venstre: -100px; top: 85px; / * På musen over åbent dias * / .horisontalt: mål bredde: 73%; højde: 230px; . Horisontal: Mål h2 top: 0px; venstre: 0; -webkit-transformation: rotate (0deg); moz-transformation: rotate (0deg); -o-transformer: roter (0deg); transformere: roter (0deg);
Ovennævnte kode vil ændre størrelsen på diaset for at passe til resten af harmonika. Overskriften blev roteret lodret for at løbe ned i overskriften, men nu med glideren åben skal vi ændre teksten tilbage til at være vandret ved at rotere teksten tilbage til 0 grader.
5. Lodret Accordion
Det lodrette accordeon fungerer på samme måde som det vandrette accordeon undtagen vi skal ændre højde i stedet for bredde og vi behøver ikke ændre justeringen af teksten.
.vertikal sektion bredde: 100%; højde: 40px; -webkit-overgang: højde 0.2s lethed; -moz-overgang: højde 0,2 udlæsning; -o-overgang: højde 0.2s lethed; overgang: højde 0,2 lethed / * Indstil højde på dias * / .vertical: mål højde: 250px; bredde: 97%;
På den mål begivenhed af den lodrette accordeon vi skal ændre højde af overskriften for at vise diaset.
.lodret afsnit h2 position: relative; venstre: 0; top: -15px; / * Indstil nummerets placering på dias * / .vertical sektion: efter top: -60px; venstre: 810px; .vertisk sektion: mål: efter venstre: -9999px;
Ovenstående vil ændre position af overskriften tekst på den lukkede dias. Med det lukkede lysbillede skal vi indstille position af nummeret som er placeret på højre side af accordeonet. Når diaset er åbent, skal vi skjule dette nummer på overskriften, når målet er indstillet, så vi ændrer den venstre position fra skærmen.
Nu, når du klikker på akkordets overskrift, ændrer diaset stilen for at vise indholdet af diaset.
Redaktørens note: Dette indlæg er skrevet af Paul Underwood til Hongkiat.com. Paul er en PHP Web Developer fra Bristol, UK. Han skriver vejledninger om webudvikling: Hovedfag omfatter PHP, jQuery, CSS3 og HTML5. Han registrerer også nyttige kodestykker på Paulund.co.uk.
