Slik lager du CSS-basert innholdsfortegnelse
I dagens veiledning skal vi lære hvordan vi kan lage en horisontal og vertikal innhold trekkraft ved å bare bruke CSS3. Det er mange jQuery plugins ut som kan gjøre denne jobben for deg, men hva gjør du hvis den besøkende har Javascript slått av, så trekkspillet vil ikke fungere riktig. Hvis ditt trekkspill er rent i CSS så vil det fungere for alle dine besøkende.
Vi skal lage en horisontal og vertikal innhold trekkspill. Når du klikker på overskriftsteksten, åpnes lysbildet som viser hele innholdet, og her er en rask forhåndsvisning (skjermbilder) hvordan de ser ut.
Liker du hva du ser? La kodingen begynne!
1. Forbereder HTML og innhold
Til å begynne med skal vi lage HTML for trekkspillet.
Strukturen trenger en beholder div og så ha a seksjon for hvert lysbilde i trekkspillet. I dette eksemplet skal vi ha 5 lysbilder. Hver av lysbildene skal ha en tittel og et avsnitt for innholdet.
Om oss
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
tjenester
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
bloggen
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
Portfolio
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
Ta kontakt med
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
Nå har vi våre lysbilder vi kan begynne å stil trekkspillet.
2. CSS Styling
Først må vi utforme innholdet div av trekkspillet. Dette gir oss en ide om hvordan du viser hvert lysbilde og hver av overskriftene.
/ * Definer akkordjonskasse * / .accordion width: 830px; flow: hidden; margin: 10px auto; color: # 474747; bakgrunn: # 414141; padding: 10px;
Deretter skal vi lage overskrifter for hvert lysbilde.
.trekkspill seksjon float: left; flow: hidden; color: # 333; Markøren: pekeren; bakgrunn: # 333; margin: 3px; .accordion: hover background: # 444;
Vi setter bakgrunnsfargen til å være mørkegrå på seksjonen for å være overskriften der de besøkende vil klikke for å vise lysbildet. Vi bruker denne delen for både overskriften og innholdet, noe som betyr at vi kan bruke mindre HTML og bruke tittelen på lysbildet som overskrift for innholdet.
.trekkspillingsseksjon p display: none;
For øyeblikket vil alle lysbildene være stengt, så vi må sørge for at avsnittet er skjult fra visning til lysbildet er åpent, så for øyeblikket stiller displayet av avsnittet til ingen.
.trekkspill-seksjon: etter posisjon: relativ; font-size: 24 piksler; color: # 000; font-vekt: bold; .accordion: nth-child (1): etter content: '1'; .accordion: nth-child (2): etter content: '2'; .accordion: nth-child (3): etter innhold: '3'; .accordion: nth-child (4): etter innhold: '4'; .accordion: nth-child (5): etter innhold: '5';
Med lysbildene lukket, ønsker vi å vise et nummer nederst i overskriften for å si hvilket nummer lysbilde vi er på. For dette skal vi bruke CSS til å legge til innhold etter seksjonens overskrift, dette kan gjøres ved å bruke :etter pseudoklassevalg.
Nå har vi opprettet overskriften til lysbildet vi kan gjøre klikkhendelsen for å vise lysbildet i trekkspillet. Men det er et problem, CSS har ikke et klikkhendelse, og derfor er trekkspillet normalt opprettet ved hjelp av jQuery, slik at vi kan legge ved et klikkhendelse til overskriftsteksten.
Vi må etterligne klikkhendelsen i CSS som kan gjøres ved å bruke :mål pseudoklassevalg.
3. Bruke :mål pseudoklassevalg
:mål tillater oss å formatere fragmentidentifikatoren. Noen ganger bruker vi en anker-tag på siden for å peke til et sted på siden. Ved å klikke på linken id i ankermerket blir målet og du kan stile dette ved å bruke :mål velger.
For å legge til dette i trekkspillet må vi legge til en lenke rundt overskriften som peker på en id av lysbildet.
Om oss
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det er mulig å bruke et eget sted. Det er mange som ikke bare er med, men det er ikke noe problem. Etiam placerat congue dolor vitae adipiscing. Alquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alt annet enn bare, ikke noe som helst. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam kjøretøyet er ikke noe som følge av dette. Phasellus eu erat enim. Prøve på magna non mass dapibus scelerisque i eu lorem.
.trekkspill-seksjon: mål bakgrunn: #FFF; padding: 10px; .accordion: target: hover background: #FFF; .accordion: mål h2 bredde: 100%; .accordion: mål h2 a farge: # 333; padding: 0; .accordion: mål p display: block; .accordion h2 a polstring: 8px 10px; display: block; font-size: 16px; font-vekt: normal; farge: #eee; text-decoration: none;
Ovennevnte kode vil endre størrelsen på lysbildet for å passe til resten av trekkspillet og endrer bakgrunnsfargen til hvit. Avsnittet var skjult, så nå på målet må vi vise avsnittet.
Nå når du klikker på overskriften til trekkspillet, vil lysbildet endre stil for å vise innholdet på lysbildet.
4. Horisontal inngang
Ovennevnte kode vil skape det generelle trekkspillet nå kan vi begynne å gjøre CSS endringer for forskjellene mellom horisontal og vertikal trekkraft. Begge disse trekkspillene har samme funksjonalitet, men overskriftstyping vil være annerledes.
.horisontal seksjon bredde: 5%; høyde: 250 px; -moz-overgang: width 0.2s utelukkelse; -webkit-overgang: width 0.2s utelukkelse; -o-overgang: width 0.2s utløp; overgang: bredde 0,2 utløp;
Først satte vi bredde av overskriften til 5%, så det er et lukket lysbilde. Siden delen er både overskriften og innholdet til lysbildet, må vi legge til animasjonen for å vise innholdet ved å bruke overgangseiendommen.
/ * Plasser nummeret på lysbildet * / .horisontalt: etter toppen: 140px; venstre: 15px;
Plasseringen av tallet på lysbildet vil være den samme posisjonen på hver lukket overskrift, disse er plassert forskjellig fra de vertikale overskriftene.
/ * Header of closed slide * /. Horizontal section h2 -webkit-transform: roter (90deg); -moz-transform: rotere (90deg); -o-transformer: roter (90deg); transformer: roter (90deg); bredde: 240 piksler; stilling: i forhold; venstre: -100px; top: 85px; / * På musen over åpent lysbilde * / .horisontalt: mål bredde: 73%; høyde: 230px; .horisontal: mål h2 topp: 0px; venstre: 0; -webkit-transform: roter (0deg); -moz-transform: roter (0deg); -o-transformer: roter (0deg); transformere: roter (0deg);
Ovennevnte kode vil endre størrelsen på lysbilde for å passe til resten av trekkspillet. Overskriften ble rotert vertikalt for å kjøre ned overskriften, men nå med lysbildet åpent må vi endre teksten tilbake til å være horisontal ved å rotere teksten tilbake til 0 grader.
5. Vertikal inngang
Det vertikale trekkspillet fungerer på samme måte som det horisontale trekkspillet, bortsett fra at vi må endre høyde i stedet for bredde og vi trenger ikke å endre justeringen av teksten.
.vertikal seksjon bredde: 100%; høyde: 40px; -webkit-overgang: høyde 0.2s utelukkelse; -moz-overgang: høyde 0,2 utløp; -o-overgang: høyde 0.2s utelukkelse; overgang: høyde 0,2 utløp; / * Angi høyde på lysbildet * / .vertical: mål høyde: 250px; bredde: 97%;
På mål Hendelsen til det vertikale trekkspillet vi skal endre høyde av overskriften for å vise lysbildet.
.vertikal seksjon h2 posisjon: relativ; venstre: 0; top: -15px; / * Angi posisjonen til nummeret på lysbildet * / .vertisk seksjon: etter topp: -60px; venstre: 810px; .vertisk seksjon: mål: etter venstre: -9999px;
Ovennevnte vil endre stilling av overskriftsteksten på det lukkede lysbildet. Med det lukkede lysbildet må vi sette inn stilling av nummeret som er plassert på høyre side av trekkspillet. Når lysbildet er åpent, må vi gjemme dette nummeret på overskriften når målet er satt slik at vi endrer venstre posisjon fra skjermen.
Nå når du klikker på overskriften til trekkspillet, vil lysbildet endre stil for å vise innholdet på lysbildet.
Redaktørens notat: Dette innlegget er skrevet av Paul Underwood for Hongkiat.com. Paul er en PHP webutvikler fra Bristol, Storbritannia. Han skriver opplæringsprogrammer om webutvikling: hovedfagene omfatter PHP, jQuery, CSS3 og HTML5. Han registrerer også nyttige kodestykker på Paulund.co.uk.
