A CSS-alapú tartalomegység létrehozása
A mai bemutatón megtudjuk, hogyan tudunk létrehozni a vízszintes és függőleges tartalom harmonika a CSS3 használatával. Sok olyan jQuery plugin van, amely ezt a feladatot elvégezheti Önnek, de mit csinálsz, ha a látogató kikapcsolta a Javascript-et, akkor a harmonika nem fog megfelelően működni. Ha a harmonika tisztán a CSS-ben van, akkor minden látogató számára működik.
Létrehozunk egy vízszintes és függőleges tartalmi harmonika. A címsor szövegére kattintva a dia megnyílik a teljes tartalom megjelenítésére, és itt egy gyors előnézet (képernyőkép), hogy hogyan néz ki.
Mint amit látsz? Hagyja kezdeni a kódolást!
1. A HTML és a tartalom elkészítése
Először a harmonika HTML-jét fogjuk létrehozni.
A szerkezethez tartályra van szükség div majd egy szakasz minden egyes csúszkához a harmonikában. Ebben a példában 5 diák lesz. Mindegyik diának lesz egy címe és egy része a tartalomhoz.
Rólunk
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
Szolgáltatások
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
Kapcsolatba lépni
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
Most már megvan a diákunk, amivel elkezdhetjük a harmonika stílusát.
2. CSS Styling
Először meg kell adnunk a tartalmat div a harmonika. Ez egy ötletet ad nekünk arról, hogyan jeleníthetjük meg az egyes csúszdákat és a fejléceket.
/ * Határozza meg a harmonika mezőt * / .accordion szélesség: 830px; overflow: hidden; margó: 10px auto; color: # 474747; háttér: # 414141; padding: 10px;
Ezután az egyes diákokhoz hozzárendeljük a címsorokat.
.harmonika szekció float: bal; overflow: hidden; color: # 333; kurzor: pointer; háttér: # 333; margin: 3px; .komponens szakasz: lebeg háttér: # 444;
A háttérszínt sötétszürkevé állítjuk a szekcióban, hogy legyen a főcím, ahol a látogatók a dia megjelenítéséhez kattintanak. Ezt a részt a főcím és a tartalom tekintetében egyaránt használjuk, ami azt jelenti, hogy kevesebb HTML-t használhatunk, és a tartalom címsorát újra használhatjuk a dia címe..
.harmonika szekció p kijelző: nincs;
Abban a pillanatban, amikor az összes diát bezárják, meg kell győződnünk arról, hogy a bekezdés elrejtve van, amíg a dia nyitva van, így most állítsa be a bekezdés megjelenítését sem.
.harmonika szakasz: után pozíció: relatív; font-size: 24px; color: # 000; font-weight: Bold; .komponens szakasz: n. gyermek (1): tartalom: '1' után; .komponens szakasz: n. gyermek (2): tartalom: 2 ”után; .komponens szakasz: n. gyermek (3): tartalom: '3' után; .komponens szakasz: n. gyermek (4): tartalom: '4' után; .komponens szakasz: n. gyermek (5): tartalom: '5' után;
A zárt diákokkal szeretnénk egy számot megjeleníteni a címsor alján, hogy megmondjuk, hogy melyik számlap van. Ehhez a CSS-t használjuk, hogy tartalmat adjunk a szekciófejléc után, ezt a :után pszeudo-osztályú választó.
Most létrehoztuk a csúszkát, amellyel a kattintási eseményt megjeleníthetjük a harmonikában. De van egy probléma, a CSS-nek nincs kattintási eseménye, ezért a harmonikát általában a jQuery használatával hozzuk létre, így csatolási eseményt csatolhatunk a főcím szövegéhez.
Meg kell utánoznunk a CSS-ben található kattintáses eseményt, amelyet a :cél pszeudo-osztályú választó.
3. Használat :cél pszeudo-osztályú szelektor
:cél lehetővé teszi számunkra, hogy a töredékazonosítót stílusosítsuk. Néha egy oldalon lévő horgonycímkét használunk arra, hogy egy oldalra mutasson. A linkre kattintva a id a horgonycímkén a célpont lesz, és ezt a :cél választó.
Ahhoz, hogy ezt hozzáadjuk a harmonikához, hozzá kell adnunk egy linket a fejléchez, amely egy id a dia.
Rólunk
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. Az aliquam semper mauris sit amet justo temporec nem lecinia magna molestie. Az Etiam placerat egybeesik a dolor vitae adipiscing-vel. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Az alegység, amely nem csak ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget pl. Nam vehicula elementum nulla sed következik. Phasellus eu erat enim. A magna non massa dapibus scelerisque eu lorem-ben.
.harmonika rész: cél háttér: #FFF; padding: 10px; .komponens szakasz: cél: lebeg háttér: #FFF; .komponens szakasz: cél h2 szélesség: 100%; .komponens szakasz: cél h2 a szín: # 333; padding: 0; .komponens szakasz: cél p kijelző: blokk; .komponens szakasz h2 a párnázás: 8px 10px; display: block; font-size: 16px; font-weight: normal; szín: #eee; text-decoration: none;
A fenti kód megváltoztatja a dia méretét, hogy illeszkedjen a harmonika többi részéhez, és megváltoztatja a háttérszínt fehérre. A bekezdés most elrejtve van a célponton, amit meg kell jelenítenünk a bekezdésben.
Most, amikor rákattintunk a harmonika fejlécére, a dia megváltoztatja a stílust a dia tartalma megjelenítéséhez.
4. Vízszintes harmonika
A fenti kód létrehozza az általános harmonikát, és most elkezdhetjük a CSS változásait a vízszintes és függőleges harmonika közötti különbségekre. Mindkét harmonika ugyanazokkal a funkciókkal rendelkezik, de a fejléc stílusa más lenne.
.vízszintes szakasz szélesség: 5%; magasság: 250px; -moz-átmenet: szélessége 0,2s leegyszerűsítés; -webkit-átmenet: szélessége 0,2s leegyszerűsítés; -o-átmenet: szélessége 0,2s leegyszerűsítés; átmenet: a szélesség 0,2s leegyszerűsítés;
Először a szélesség a címsor 5% -át, így zárt dia. Mivel a szekció mind a címsor, mind a dia tartalma, hozzá kell adnunk az animációt a tartalom megjelenítéséhez az átmeneti tulajdonság használatával.
/ * Helyezze el a csúszka számát * / .horizontal section: után top: 140px; left: 15px;
A csúszka számának pozíciója minden zárt fejlécen azonos pozícióban lesz, amelyek eltérően vannak a függőleges címsorokhoz képest.
/ * Zárt dia * / .horizontal h2 -webkit-transform: forgatás (90deg); -moz-transzformáció: forgatni (90deg); -o-transzformáció: forgatás (90deg); transzformálás: forgatás (90deg); szélesség: 240px; helyzet: a relatív; bal: -100px; top: 85px; / * Nyitott lemezen * / .horizontal: target szélesség: 73%; magasság: 230px; .horizontal: target h2 top: 0px; bal: 0; -webkit-transzformáció: Forgatás (0deg); -moz-transzformáció: Forgatás (0deg); -o-transzformálás: forgatás (0deg); transzformálás: forgatás (0deg);
A fenti kód megváltoztatja a dia méretét, hogy illeszkedjen a harmonika többi részéhez. A címsort függőlegesen elforgatták, hogy lefelé haladjon a címsor, de most, amikor a dia nyitva van, vissza kell változtatnunk a szöveget, hogy vízszintes legyen, ha a szöveget 0 fokra forgatjuk..
5. Függőleges harmonika
A függőleges harmonika ugyanúgy működik, mint a vízszintes harmonika, kivéve, ha meg kell változtatnunk magasság ahelyett, hogy szélesség és nem kell megváltoztatnunk a szöveg igazítását.
.függőleges szakasz szélesség: 100%; magasság: 40px; -webkit-átmenet: a magasság 0.2s leegyszerűsítése; -moz-átmenet: a magasság 0.2s leegyszerűsítése; -o-átmenet: a magasság 0.2s leegyszerűsítése; átmenet: a magasság 0.2s leegyszerűsítése; / * A dia csúcsának beállítása * / .vertical: target height: 250px; szélesség: 97%;
A cél a függőleges harmonika esetét megváltoztatjuk magasság a címsor megjelenítéséhez.
.függőleges szakasz h2 pozíció: relatív; bal: 0; top: -15px; / * A szám pozíciójának beállítása a dia * / .vertical szakaszban: után top: -60px; left: 810px; .irányú szakasz: cél: után left: -9999px;
A fentiek megváltoztatják a pozíció a főcím szövege a zárt lemezen. A zárt csúszkával be kell állítanunk a pozíció a harmonika jobb oldalán található szám. Amikor a dia nyitva van, el kell rejtenünk ezt a számot a címsoron, amikor a cél beállítást kapjuk, így a bal pozíciót a képernyőn változtatjuk.
Most, amikor rákattintunk a harmonika fejlécére, a dia megváltoztatja a stílust a dia tartalma megjelenítéséhez.
A szerkesztő megjegyzése: Ezt a bejegyzést írta Paul Underwood Hongkiat.com részére. Paul egy PHP webes fejlesztő, Bristol, Egyesült Királyság. Ő írja a Webfejlesztés oktatóanyagát: a fő témák közé tartozik a PHP, a jQuery, a CSS3 és a HTML5. A Paulund.co.uk-nál hasznos kódrészleteket is rögzít.
