Ako vytvoriť akordy obsahu založené na CSS
V dnešnom tutoriáli sa dozvieme, ako môžeme vytvoriť horizontálnym a vertikálnym obsahom akordeónu pomocou CSS3. Existuje mnoho pluginov jQuery, ktoré vám môžu robiť túto prácu, ale čo robíte, ak má návštevník Javascript vypnutý, potom akordeón nefunguje správne. Ak je váš akordeón čisto v CSS, potom bude fungovať pre všetkých vašich návštevníkov.
Chystáme sa vytvoriť horizontálne a vertikálne obsahový akordeón. Po kliknutí na nadpis sa otvorí snímka s plným obsahom a tu je rýchly náhľad (obrázky obrazovky), ako vyzerajú.
Ako to, čo vidíš? Nechajte kódovanie začať!
1. Príprava HTML a obsahu
Najprv vytvoríme HTML pre akordeón.
Štruktúra potrebuje kontajner div a potom mať časť pre každú snímku v akordeóne. V tomto príklade budeme mať 5 snímok. Každá z obrázkov bude obsahovať názov a odsek obsahu.
O nás
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
služby
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
Blog
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
portfólio
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
Kontakt
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
Teraz máme naše diapozitívy, môžeme začať štýl akordeónu.
2. Styling CSS
Najprv musíme štýl obsahovať div akordeónu. Toto nám dáva predstavu o tom, ako zobraziť jednotlivé snímky a každý titulok.
/ * Definovať rám Akordión * / .accordion width: 830px; overflow: hidden; margin: 10px auto; color: # 474747; background: # 414141; padding: 10px;
Ďalej vytvoríme titulky pre každý z obrázkov.
.akordeónová sekcia float: left; overflow: hidden; color: # 333; Kurzor: pointer; pozadie: # 333; rozpätie: 3PX; .priúčka sekcie: vznášať sa na pozadí background: # 444;
Nastavíme farbu pozadia na tmavosivú farbu na sekciu, ktorá má byť titulok, na ktorom budú návštevníci kliknutí zobrazovať snímku. Túto sekciu používame ako pre nadpis, tak aj pre obsah, čo znamená, že môžeme použiť menej HTML a opätovne používať názov snímky ako titulok obsahu.
.akordeónová sekcia p zobrazenie: žiadna;
V súčasnosti budú všetky snímky zatvorené, takže sa musíme uistiť, že odsek je skrytý z pohľadu, kým nie je otvorený, takže teraz nastavte zobrazenie odseku na žiadny.
.sekcia akordeóna: po pozícii: relatívnej; font-size: 24 pixelov; color: # 000; font-váha: tučný; sekcia .ccordion: nth-child (1): after content: '1'; sekcia .kcordion: nth-child (2): after content: '2'; sekcia .ccordion: nth-child (3): po obsah: '3'; .kcordion sekcia: nth-child (4): po obsah: '4'; .kcordion sekcia: nth-child (5): po obsah: '5';
Pri zatvorených diapozitíroch chceme zobraziť číslo v dolnej časti nadpisu, aby sme povedali, na ktorom čísle sa nachádzame. Za týmto účelom budeme používať CSS na pridanie obsahu za nadpisom časti, čo sa dá urobiť pomocou : po selektor pseudotriedy.
Teraz sme vytvorili nadpis pre snímku, pomocou ktorého môžeme vytvoriť kliknutie a zobraziť snímku v akordeóne. Existuje však problém, CSS nemá žiadnu udalosť kliknutia, a preto je akordeón normálne vytvorený pomocou jQuery, takže môžeme pripojiť udalosť kliknutia do nadpisu.
Musíme napodobniť udalosť kliknutí v CSS, ktorú je možné vykonať pomocou : cieľová selektor pseudotriedy.
3. Použitie : cieľová selektor pseudotriedy
: cieľová nám umožňuje štýlovať identifikátor fragmentu. Niekedy používame značku na kotvenie na stránke, ktorá smeruje na miesto na stránke. Po kliknutí na odkaz id v kotevnej značke sa stáva cieľ a môžete to stlačiť pomocou : cieľová volič.
Aby sme to pridali do akordeónu, musíme pridať odkaz okolo nadpisu ukazujúceho na id snímku.
O nás
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sedte amet elementum mi. Fusce posútre nunc a mi tempus malesuada. Kurabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sedí amet justo tempor nec nec lacinia magna molestie. Etiam placerat sa domnieva, že má adopiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam in justo ante, non semper mi. Nulla počítat medzivýma hmotnosť, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Vozidlo v prvom rade neplatí. Phasellus eu erat enim. Práca na magna non massa dapibus scelerisque v eu lorem.
.sekcia akordeóna: cieľ background: #FFF; padding: 10px; .priúčka: cieľ: podržte background: #FFF; .priúčka: cieľ h2 šírka: 100%; .prihlásenie: cieľ h2 a color: # 333; padding: 0; .priúčka: cieľ p zobrazenie: blok; .priúčka sekcie h2 a padding: 8px 10px; Zobrazenie: blok; font-size: 16px; font-weight: normálne; Farba: #eee; text-decoration: none;
Vyššie uvedený kód zmení veľkosť snímky tak, aby sa zmestil zvyšok harmoniky a zmenila farbu pozadia na bielu. Tento odsek bol skrytý, takže teraz na cieľ musíme zobraziť odsek.
Teraz, keď kliknete na titulok harmoniky, snímka zmení štýl, aby zobrazil obsah snímky.
4. Horizontálna akordeón
Vyššie uvedený kód vytvorí všeobecný akordeón, teraz môžeme začať robiť zmeny CSS pre rozdiely medzi horizontálnym a vertikálnym harmonikom. Oba tieto akordeóny majú rovnakú funkčnosť, ale hlavný styl by bol iný.
.horizontálny úsek šírka: 5%; výška: 250 pixelov; -moz-transition: šírka 0.2s ease-out; -webkit-transition: šírka 0.2s ease-out; -o-prechod: šírka 0.2s jednoduchosť-out; prechod: šírka 0,2s jednoduchosť;
Najprv sme nastavili šírka z titulnej časti na 5%, takže ide o uzavretú snímku. Vzhľadom na to, že časť je titulok aj obsah pre snímku, musíme pridať animáciu na zobrazenie obsahu pomocou funkcie prechodu.
/ * Umiestnite číslo posuvného * / horizontálneho oddielu: po top: 140px; left: 15px;
Poloha čísla na snímke bude mať rovnakú pozíciu na každom uzavretom nadpisu, ktoré sú umiestnené odlišne od vertikálnych titulkov.
/ * Záhlavie uzavretého posúvača * /. Horizontálna sekcia h2 -webkit-transform: rotácia (90deg); -moz-transformácie: otočenie (90DEG); -o-transformácia: otočenie (90deg); transformácia: otočenie (90deg); šírka: 240 pixelov; Pozícia: relatívna; left: -100px; top: 85px; / * Na myši nad otvoreným posúvaním * /. Horizontálne: cieľ (šírka: 73%; výška: 230px; horizontálna: cieľ h2 top: 0px; vľavo: 0; -webkit-transformácie: otáčania (0deg); -moz-transformácie: otáčania (0deg); -o-transform: otočenie (0deg); transformovať: otočiť (0deg);
Vyššie uvedený kód zmení veľkosť snímky tak, aby sa zmestil zvyšok harmoniky. Titulok bol otočený zvislo stekať titulok, ale teraz sa šmýkačkou otvorené musíme zmeniť text späť do vodorovne otáčaním textu späť na 0 stupňov.
5. Vertikálna akordeón
Vertikálna akordeón funguje rovnako ako horizontálna akordeón, s výnimkou, že musíme zmeniť výška namiesto šírka a nemusíte meniť zarovnanie textu.
.zvislá časť šírka: 100%; výška: 40px; -webkit-transition: výška 0.2s ease-out; -moz-transition: výška 0.2s ease-out; -o-prechod: výška 0,2 s ľahkosťou; prechod: výška 0.2 s ľahkosťou; / * Nastaviť výšku posúvača * / .vertical: target height: 250px; šírka: 97%;
Na terč akcie vertikálnej akordeónovej, ktorú zmeníme výška titulku na zobrazenie posúvača.
.zvislá časť h2 poloha: relatívna; vľavo: 0; Horná: -15px; / * Nastavenie pozície čísla na snímke * /. Vertikálna sekcia: po top: -60px; left: 810px; vertikálna sekcia: cieľ: po left: -9999px;
Vyššie uvedená zmena pozície hlavného textu na uzavretom diapozitíve. S uzavretým posúvaním je potrebné nastaviť pozície z čísla, ktoré sa nachádza vpravo od akordeónu. Keď je snímka otvorená, musíme skryť toto číslo na nadpisu, keď je cieľ nastavený, takže zmeníme ľavú pozíciu mimo obrazovku.
Teraz, keď kliknete na titulok harmoniky, snímka zmení štýl, aby zobrazil obsah snímky.
Poznámka redaktora: Tento príspevok je napísaný používateľom Paul Underwood pre Hongkiat.com. Paul je PHP Web Developer z Bristolu, Veľká Británia. Píše tutoriály o vývoji webu: hlavné témy zahŕňajú PHP, jQuery, CSS3 a HTML5. Zároveň zaznamenáva užitočné úryvky kódu na adrese Paulund.co.uk.
