Jak vytvořit CSS-založený obsah harmonogram
V dnešním tutoriálu se budeme učit, jak můžeme vytvořit horizontální a vertikální akordeon pomocí CSS3. Existuje mnoho plug-inů jQuery, které mohou dělat tuto práci za vás, ale co uděláte, pokud návštěvník má vypnutý Javascript, pak akordeon nebude fungovat správně. Pokud je váš akordeon čistě v CSS, pak to bude fungovat pro všechny vaše návštěvníky.
Vytvoříme a horizontální a vertikální obsah akordeon. Po kliknutí na text nadpisu se snímek otevře a zobrazí celý obsah a zde je rychlý náhled (snímky obrazovky), jak vypadají..
Líbí se ti co vidíš? Začněte kódování!
1. Příprava HTML a obsahu
Začneme vytvořením HTML pro harmoniku.
Konstrukce potřebuje kontejner div a pak mají sekce pro každý snímek v harmonice. V tomto příkladu budeme mít 5 diapozitivů. Každý snímek bude mít titul a odstavec pro obsah.
O nás
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. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti magna non massa dapibus scelerisque in eu lorem.
Služby
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. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti 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. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti magna non massa dapibus scelerisque in eu lorem.
Portfolio
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. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti magna non massa dapibus scelerisque in 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 semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti magna non massa dapibus scelerisque in eu lorem.
Nyní máme naše diapozitivy, které můžeme začít stylem harmoniky.
2. CSS Styling
Nejdříve musíme styl obsahovat div harmoniky. To nám dá představu o tom, jak zobrazit všechny snímky a každý z titulků.
/ * Definujte akordeonovou krabici * / .accordion width: 830px; přetečení: skryté; okraj: 10px auto; barva: # 474747; pozadí: # 414141; polstrování: 10px;
Dále vytvoříme titulky pro každý snímek.
.akordeonová sekce float: left; přetečení: skryté; barva: # 333; kurzor: ukazatel; pozadí: # 333; marže: 3px; .accordion sekce: hover background: # 444;
Nastavujeme barvu pozadí tak, aby byla tmavě šedá v této sekci, aby byl titulkem, kde návštěvníci kliknou, aby zobrazili snímek. Používáme tuto sekci jak pro titulek, tak pro obsah, což znamená, že jsme schopni používat méně HTML a znovu použít titul snímku jako titulek obsahu..
.sekce harmoniky p display: none;
V tuto chvíli budou všechny snímky zavřeny, takže se musíme ujistit, že je odstavec skrytý před zobrazením snímku, takže nyní nastavte zobrazení odstavce na žádný..
.akordeon sekce: po pozice: relativní; velikost písma: 24px; barva: # 000; font-weight: tučné; sekce .cardion: nth-child (1): after content: '1'; .část oddílu: nth-child (2): after content: '2'; .část oddílu: nth-child (3): after content: '3'; sekce .cardion: nth-child (4): after content: '4'; .část oddílu: nth-child (5): after content: '5';
Se zavřenými snímky chceme zobrazit číslo ve spodní části nadpisu, abychom řekli, na kterém čísle se nacházíme. K tomu použijeme CSS pro přidání obsahu za nadpisem sekce, což lze provést pomocí :po selektor pseudo-třídy.
Nyní jsme vytvořili titulek pro snímek, na kterém můžeme kliknout a zobrazit snímek v harmonii. Ale je tu problém, CSS nemá událost click, což je důvod, proč je akordeon normálně vytvořen pomocí jQuery, takže můžeme k textu nadpisu připojit událost click..
Potřebujeme napodobit událost kliknutí v CSS, kterou lze provést pomocí :cílová selektor pseudo-třídy.
3. Použití :cílová Výběr pseudo-třídy
:cílová nám umožňuje vytvořit identifikátor fragmentu. Někdy používáme kotevní značku na stránce, která ukazuje na místo na stránce. Po kliknutí na odkaz id v kotevním štítku se stává terčem a toto můžete vytvořit pomocí :cílová volič.
Abychom to do harmoniky přidali, musíme přidat odkaz kolem nadpisu ukazující na id skluzu.
O nás
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. Etiam 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. Phasellus eu erat enim. Praesent ve společnosti magna non massa dapibus scelerisque in eu lorem.
.sekce harmoniky: target background: #FFF; polstrování: 10px; .accordion sekce: target: hover background: #FFF; .accordion sekce: target h2 width: 100%; sekce .accordion: target h2 a color: # 333; výplň: 0; sekce .accordion: target p display: block; .část sekce h2 a padding: 8px 10px; zobrazení: blok; velikost písma: 16px; font-weight: normální; barva: #eee; text-decoration: žádný;
Výše uvedený kód změní velikost snímku tak, aby se vešel na zbytek harmoniky, a změní barvu pozadí na bílou. Tento odstavec byl skryt, takže nyní na cíli musíme zobrazit odstavec.
Nyní, když kliknete na titulek harmoniky, změní se snímek stylem zobrazení obsahu snímku.
4. Horizontální akordeon
Výše uvedený kód nyní vytvoří obecnou akordeon, abychom mohli začít provádět změny CSS pro rozdíly mezi horizontální a vertikální harmonikou. Oba tyto akordeony mají stejnou funkčnost, ale styling titulků by byl jiný.
.horizontální řez šířka: 5%; výška: 250x; -moz-přechod: šířka 0,2s; -webk-přechod: šířka 0.2s snadné-out; -o-přechod: šířka 0,2s; přechod: šířka 0,2s snadnost;
Nejdříve jsme nastavili šířka části titulku na 5%, takže se jedná o uzavřené sklíčko. Vzhledem k tomu, že sekce je titulek i obsah snímku, musíme přidat animaci, aby se obsah zobrazil pomocí vlastnosti přechodu.
/ * Umístění čísla snímku * / .horizontal: po top: 140px; vlevo: 15px;
Poloha čísla na snímku bude ve stejné poloze na každém uzavřeném titulku, který je umístěn odlišně od svislých titulků.
/ * Záhlaví uzavřené sklíčko * /. Horizontální sekce h2 -webkit-transform: rotate (90deg); -moz-transformace: rotace (90deg); -o-transformace: rotace (90deg); transformace: rotace (90deg); šířka: 240px; poloha: relativní; vlevo: -100px; nahoru: 85px; / * Na myši přes otevřený snímek * / .horizontal: target width: 73%; výška: 230px; .horizontal: target h2 top: 0px; vlevo: 0; -webk-transform: rotovat (0deg); -moz-transformace: rotace (0deg); -o-transformace: rotace (0deg); transformace: rotace (0deg);
Výše uvedený kód změní velikost snímku tak, aby se vešel na zbytek harmoniky. Titulek byl otočen svisle, aby se spustil dolů nad titulek, ale nyní s otevřeným sklíčkem musíme změnit text zpět na horizontální otočením textu zpět na 0 stupňů..
5. Vertikální akordeon
Vertikální akordeon funguje stejně jako horizontální akordeon, kromě toho musíme změnit výška místo šířka a nemusíme měnit zarovnání textu.
.vertikální řez šířka: 100%; výška: 40px; -webkit přechod: výška 0,2s snadnost-out; -moz-přechod: výška 0,2s snadnost-out; -o-přechod: výška 0,2s snadnost-out; přechod: výška 0,2s lehkost; / * Nastavit výšku snímku * / .vertical: target výška: 250px; šířka: 97%;
Na cílová události vertikální akordeon budeme měnit výška pro zobrazení snímku.
.svislý řez h2 poloha: relativní; vlevo: 0; nahoru: -15px; / * Nastavte pozici čísla na snímku * / .vertical sekce: po top: -60px; vlevo: 810px; .vertical section: target: after left: -9999px;
Výše uvedené změní nastavení pozice textu titulku na uzavřeném snímku. S uzavřeným sklíčkem musíme nastavit pozice čísla, které se nachází napravo od harmoniky. Když je snímek otevřen, musíme toto číslo skrýt na titulku, když je cíl nastaven, takže změníme levou pozici mimo obrazovku.
Nyní, když kliknete na titulek harmoniky, změní se snímek stylem zobrazení obsahu snímku.
Poznámka editora: Tento příspěvek je napsán Paul Underwood pro Hongkiat.com. Paul je PHP Web Developer z Bristolu ve Velké Británii. Píše tutoriály o vývoji webu: hlavní předměty zahrnují PHP, jQuery, CSS3 a HTML5. On také zaznamenává užitečné úryvky kódu na Paulund.co.uk.
