Kako stvoriti CSS-temeljen harmonika sadržaja
U današnjem tutorialu ćemo naučiti kako možemo stvoriti horizontalni i vertikalni sadržaj harmonika samo pomoću CSS3. Postoje mnogi jQuery dodaci koji mogu obaviti ovaj posao za vas, ali što učiniti ako posjetitelj ima Javascript isključen, onda harmonika neće raditi ispravno. Ako je vaša harmonika isključivo u CSS-u onda će raditi za sve vaše posjetitelje.
Stvorit ćemo vodoravan i vertikala sadržaj harmonika. Klikom na tekst naslova otvorit će se slajd koji prikazuje cijeli sadržaj, a evo i brzog pregleda (screenshotovi) kako oni izgledaju.
Kao što vidite? Neka kodiranje započne!
1. Priprema HTML-a i sadržaja
Za početak ćemo napraviti HTML za harmoniku.
Struktura treba spremnik div i onda imati odjeljak za svaki slajd u harmonici. U ovom primjeru imat ćemo 5 slajdova. Svaki od slajdova ima naslov i odlomak za sadržaj.
O nama
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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u eu lorem.
usluge
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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u 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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u eu lorem.
Portfelj
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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u eu lorem.
Kontakt
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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u eu lorem.
Sada imamo naše slajdove i možemo početi oblikovati harmoniku.
2. CSS Styling
Prvo moramo oblikovati sadržaj div na harmonici. To će nam dati ideju kako prikazati svaki od slajdova i svaki od naslova.
/ * Definirajte kutiju s harmonikom * / .accordion širina: 830px; overflow: hidden; margina: 10px auto; color: # 474747; Pozadina: # 414.141; padding: 10px;
Zatim ćemo stvoriti naslove za svaki od slajdova.
.dio harmonika float: lijevo; overflow: hidden; color: # 333; Pokazivač: pokazivač; pozadina: # 333; margin: 3px; .akordionski odjeljak: lebdenje pozadina: # 444;
Boju pozadine postavljamo na tamno sivu boju u odjeljku kako bi bio naslov u kojem će posjetitelji kliknuti za prikaz slajda. Ovaj odjeljak koristimo i za naslov i za sadržaj, što znači da možemo koristiti manje HTML-a i ponovno koristiti naslov slajda kao naslov sadržaja.
.odjeljak harmonika p (prikaz: nema;
U ovom trenutku svi će se slajdovi zatvoriti pa moramo provjeriti je li paragraf skriven iz prikaza dok se slajd ne otvori, pa za sada postavite prikaz paragrafa.
.odjeljak harmonika: poslije position: relative; font-size: 24 px; Boja: # 000; font-weight: podebljano; .accordion odjeljak: nth-dijete (1): poslije content: '1'; .accordion: nth-child (2): poslije content: '2'; .akordionski odjeljak: nth-child (3): poslije content: '3'; .akordionski odjeljak: nth-child (4): poslije content: '4'; .akordionski odjeljak: nth-child (5): poslije content: '5';
Kad su slajdovi zatvoreni, želimo prikazati broj na dnu naslova kako bismo naveli broj slajdova na kojem se nalazimo. Za to ćemo koristiti CSS za dodavanje sadržaja nakon naslova odjeljka, to se može učiniti pomoću :nakon izbornik pseudo-klase.
Sada smo napravili naslov za slajd možemo napraviti događaj klikom za prikaz slajda u harmonici. No, postoji problem, CSS nema događaj klika, zbog čega se harmonika obično stvara pomoću jQuery tako da možemo priložiti događaj klikom na tekst naslova.
Moramo oponašati događaj klikanja u CSS-u koji se može učiniti pomoću alata :cilj izbornik pseudo-klase.
3. Korištenje :cilj selektor pseudo-klase
:cilj omogućuje nam da stiliziramo identifikator fragmenta. Ponekad koristimo oznaku sidra na stranici da bismo ukazali na mjesto na stranici. Klikom na vezu iskaznica u oznaci sidra postaje cilj i možete ga oblikovati pomoću znaka :cilj selektor.
Da bi to dodali u harmoniku, moramo dodati vezu oko naslova koji pokazuje na iskaznica slajda.
O nama
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 sempre mauris sit amet justo time nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ali iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, ne sempre 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 posled. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque u eu lorem.
.odjeljak harmonika: ciljna pozadina: #FFF; padding: 10px; . accordion dio: target: hover pozadina: #FFF; .akordionski odjeljak: ciljni h2 širina: 100%; .accordion: ciljni h2 a color: # 333; padding: 0; .akordionski odjeljak: ciljni p display: block; .akordionski odjeljak h2 a padding: 8px 10px; Prikaz: blok; font-size: 16px; font-weight: normalna; boja: #eee; text-decoration: none;
Gornji kod će promijeniti veličinu slajda kako bi odgovarao ostatku harmonike i mijenja boju pozadine u bijelu. Odlomak je bio skriven tako da sada na meti moramo prikazati odlomak.
Kada kliknete na naslov harmonike, slajd će promijeniti stil i prikazati sadržaj slajda.
4. Horizontalna harmonika
Gornji kod će stvoriti opću harmoniju sada možemo početi s CSS promjenama za razlike između horizontalne i vertikalne harmonike. Oba ova harmonika imaju istu funkcionalnost, ali stilski naslov bi bio drugačiji.
.vodoravni presjek širina: 5%; visina: 250px; -moz-prijelaz: širina 0.2s jednostavnost-out; -webkit-prijelaz: širina 0.2s jednostavnost-out; -o-prijelaz: širina 0.2s; prijelaz: širina 0.2s;
Prvo postavimo širina naslova naslova do 5% tako da je zatvoren slajd. Budući da je odjeljak i naslov i sadržaj slajda, potrebno je dodati animaciju za prikaz sadržaja pomoću svojstva prijelaza.
/ * Postavite broj slajda * / .horizontalni dio: nakon top: 140px; lijevo: 15px;
Položaj broja na slajdu će biti na istoj poziciji na svakoj zatvorenoj naslovnici koji su različito postavljeni od vertikalnih naslova.
/ * Zaglavlje zatvorenog slajda * / .horizontalni dio h2 -webkit-transform: rotiraj (90deg); -moz-transformacija: rotirati (90deg); -o-transformacija: rotiranje (90deg); transformacija: rotiranje (90deg); Širina: 240px; Položaj: relativna; lijevo: -100px; vrh: 85px; / * Na mišu iznad otvorenog slajda * / .horizontal: target width: 73%; visina: 230px; .horizontal: target h2 vrh: 0px; lijevo: 0; -webkit-transformacija: rotirati (0deg); -moz-transformacija: rotirati (0deg); -o-transformacija: rotiranje (0deg); transformacija: rotiranje (0deg);
Gornji kod će promijeniti veličinu slajda kako bi odgovarao ostatku harmonike. Naslov je rotiran okomito da bi se pokrenuo niz naslova, ali sada s otvorenim slajdom moramo promijeniti tekst natrag na vodoravno okretanjem teksta natrag na 0 stupnjeva.
5. Vertikalna harmonika
Vertikalna harmonika djeluje na isti način kao i horizontalna harmonika, osim što trebamo promijeniti visina umjesto širina i ne trebamo mijenjati poravnanje teksta.
.okomiti presjek širina: 100%; visina: 40px; -webkit-prijelaz: visina 0.2s lakoća-out; -moz-prijelaz: visina 0.2s olakšava-out; -o-prijelaz: visina 0.2s olakšava se; prijelaz: visina 0.2s lakoća; / * Postavite visinu slajda * / .vertical: target height: 250px; Širina: 97%;
Na cilj U slučaju vertikalne harmonike promijenit ćemo visina naslova za prikaz slajda.
.okomiti presjek h2 položaj: relativan; lijevo: 0; vrh: -15px; / * Postavite položaj broja na slajdu * / .vertical dio: nakon top: -60px; lijevo: 810px; .vertical dio: target: after left: -9999px;
Gore će promijeniti postavku položaj teksta naslova na zatvorenom slajdu. Sa zatvorenim klizačem moramo postaviti položaj broja koji se nalazi s desne strane harmonike. Kada je slajd otvoren moramo sakriti taj broj na naslov kada je cilj postavljen tako da mijenjamo lijevu poziciju sa zaslona.
Kada kliknete na naslov harmonike, slajd će promijeniti stil i prikazati sadržaj slajda.
Napomena urednika: Ovaj post je napisao / la Paul Underwood za Hongkiat.com. Paul je PHP Web Developer iz Bristola, Velika Britanija. On piše tutoriale o Web Development: glavne teme uključuju PHP, jQuery, CSS3 i HTML5. On također bilježi korisne isječke koda u Paulund.co.uk.
