Kaip sukurti CSS pagrindu sukurtą turinį
Šiandienos pamokoje mes sužinosime, kaip galime sukurti a horizontalaus ir vertikalaus turinio akordeonas tiesiog naudojant CSS3. Yra daug jQuery įskiepių, kurie gali atlikti šį darbą jums, bet ką daryti, jei lankytojas išjungė „Javascript“, tada akordeonas neveiks teisingai. Jei jūsų akordeonas yra tik CSS, jis veiks visiems lankytojams.
Mes sukursime a horizontaliai ir vertikaliai turinio akordeonas. Spustelėję antraštės tekstą, skaidrė bus rodoma, kai bus rodomas visas turinys, ir čia yra greitas peržiūra (ekrano kopijos), kaip jie atrodo.
Kaip matote? Leiskite pradėti kodavimą!
1. HTML ir turinio paruošimas
Visų pirma norime sukurti akordeono HTML.
Struktūrai reikia konteinerio div ir tada turi a skyrius už kiekvieną stiklą akordeone. Šiame pavyzdyje turėsime 5 skaidres. Kiekviena skaidrių turinys turės pavadinimą ir pastraipą.
Apie mus
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
Paslaugos
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
Dienoraštis
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
Portfelis
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
kontaktas
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
Dabar mes turime savo skaidres, kurias mes galime pradėti stiliuoti akordeonui.
2. CSS stilius
Pirmiausia turime stilių turinti div akordeono. Tai suteiks mums idėją, kaip rodyti kiekvieną skaidrę ir kiekvieną antraštę.
/ * Apibrėžti akordeono dėžutę * / .accordion plotis: 830px; perteklius paslėptas; paraštė: 10px auto; spalva: # 474747; fonas: # 414141; paminkštinimas: 10px;
Toliau kiekvienai skaidriai bus sukurtos antraštės.
.akordeono sekcija float: kairėje; perteklius paslėptas; spalva: # 333; žymeklis: žymeklis; fonas: # 333; marža: 3px; .akordiono sekcija: hover background: # 444;
Nustatome, kad fono spalva būtų tamsiai pilka, kad būtų antraštė, kurioje lankytojai spustelės, kad būtų rodomas skaidrės. Mes naudojame šį skyrių ir antraštei, ir turiniui, o tai reiškia, kad galime naudoti mažiau HTML ir pakartotinai naudoti skaidrės pavadinimą kaip turinio antraštę.
.akordeono skyrius p ekranas: nėra;
Šiuo metu visos skaidrės bus uždarytos, todėl turime įsitikinti, kad ta dalis yra paslėpta, kol skaidrė bus atidaryta, todėl dabar nustatykite pastraipos rodymą niekam.
.akordeono sekcija: po pozicija: santykinis; šrifto dydis: 24px; spalva: # 000; šrifto svoris: paryškintas; .akordijinė sekcija: n-vaikas (1): po turinys: 1 “; .akordiono sekcija: n-vaikas (2): po turinys: 2 “; .akordiono sekcija: n-vaikas (3): po turinys: 3 “; .akordiono sekcija: n-os vaikas (4): po turinys: 4 “; .akordiono sekcija: n-vaikas (5): po turinys: 5 “;
Uždarius skaidrius, norime parodyti numerį antraštės apačioje, kad galėtume pasakyti, kuris skaičiaus skaidrės yra. Tam mes naudosime CSS, kad pridėtume turinį po sekcijos antraštės, tai galima padaryti naudojant : po pseudo klasės selektorius.
Dabar sukūrėme skaidrės antraštę, kurią galime padaryti paspaudimu, kad būtų rodomas skaidrių akordeonas. Tačiau yra problema, CSS neturi paspaudimo įvykio, todėl akordeonas paprastai sukuriamas naudojant jQuery, kad galėtume pridėti paspaudimo įvykį ant antraštės teksto.
Turime imituoti paspaudimo įvykį CSS, kurį galima atlikti naudojant : tikslas pseudo klasės selektorius.
3. Naudojimas : tikslas pseudo klasės selektorius
: tikslas leidžia mums sukurti fragmento identifikatorių. Kartais mes naudojame puslapyje esančią inkaro žymę, kad nurodytume vietą puslapyje. Spustelėję nuorodą ID inkaro žyma tampa taikiniu, ir tai galite stiliaus, naudodami : tikslas selektorių.
Norėdami pridėti šį į akordeoną, turime pridėti nuorodą aplink antraštę, nukreiptą į ID skaidrės.
Apie mus
„Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse id lobortis massa. Nunc viverra velit leo. Fusce posuere nunc a mi tempus malesuada. „Curabitur facilisis rhoncus eros eget placerat“. Aliquam semper mauris sit amet justo time be lecinia magna molestie. Etiam placerat yra dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Niekur kitur priskirtas aliquam. 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. Pristatomas ES lorem magna non massa dapibus scelerisque.
.akordeono sekcija: taikinys fonas: #FFF; paminkštinimas: 10px; .akordiono sekcija: taikinys: hover background: #FFF; akordeoninė sekcija: tikslinis h2 plotis: 100%; .akumuliacijos sekcija: tikslinis h2 a spalva: # 333; įdėklas: 0; .akordiono sekcija: taikinys p ekranas: blokas; .akordiono sekcija h2 a įdėklas: 8px 10px; ekranas: blokas; šrifto dydis: 16px; šrifto svoris: normalus; spalva: #eee; teksto apdaila: nėra;
Minėtas kodas pakeis skaidrių dydį, kad jis atitiktų likusią akordeono dalį, ir fono spalvą pakeis į baltą. Ši dalis dabar buvo paslėpta dėl tikslo, kurį turime parodyti pastraipoje.
Dabar, kai spustelėsite akordeono antraštę, skaidrė pakeis stilių, kad būtų rodomas skaidrės turinys.
4. Horizontalus akordeonas
Pirmiau minėtas kodas sukurs bendrą akordeoną, o dabar pradėsime CSS pokyčius dėl skirtumų tarp horizontalaus ir vertikalaus akordeono. Abu šie akordeonai turi tokį patį funkcionalumą, tačiau antraštės stilius būtų kitoks.
.horizontali sekcija plotis: 5%; aukštis: 250 pikselių; -moz-perėjimas: plotis 0.2s lengvumas; -webkit-perėjimas: pločio 0.2s lengvumas; -o-perėjimas: pločio 0.2s lengvumas; perėjimas: 0.2s pločio lengvumas;
Pirmiausia nustatome plotis antraštės dalis iki 5%, todėl tai yra uždaras skaidrė. Kadangi skiltis yra ir antraštės, ir skaidrės turinys, turime pridėti animaciją, kad turinys būtų rodomas naudojant pereinamojo turto turinį.
/ * Padėkite slydimo numerį * / .horizontal section: po top: 140px; kairėje: 15px;
Skaičių padėtis ant skaidrių bus ta pačia padėtimi kiekvienoje uždaroje antraštėje, kuri yra išdėstyta kitaip nei vertikalios antraštės.
/ * Uždarojo skaidrės * / .horizontal section h2 -webkit-transform: rotate (90deg) antraštė; -moz-transform: pasukti (90deg); -o-transformuoti: pasukti (90deg); transformuoti: pasukti (90deg); plotis: 240px; pozicija: santykinis; kairėje: -100px; viršuje: 85px; / * Pele ant atviros skaidrės * / .horizontal: target plotis: 73%; aukštis: 230 pikselių; .horizontal: target h2 top: 0px; kairėje: 0; -webkit-transform: pasukti (0deg); -moz-transform: pasukti (0deg); -o-transformuoti: pasukti (0deg); transformuoti: pasukti (0deg);
Minėtas kodas pakeis skaidrių dydį, kad jis atitiktų likusią akordeono dalį. Antraštė buvo pasukta vertikaliai, kad būtų paleista žemyn antraštės, bet dabar, kai skaidrė atidaryta, reikia pakeisti tekstą atgal, kad jis būtų horizontalus, sukdami tekstą atgal į 0 laipsnių.
5. Vertikali harmonija
Vertikalus akordeonas veikia taip pat, kaip ir horizontalus akordeonas, išskyrus tai, kad reikia pakeisti aukštis vietoj plotis ir nereikia keisti teksto derinimo.
.vertikali sekcija plotis: 100%; aukštis: 40px; -webkit-perėjimas: aukštis 0.2s lengvumas; -moz-perėjimas: aukštis 0.2s lengvumas; -o-perėjimas: aukštis 0.2s lengvumas; perėjimas: aukštis 0.2s lengvumas; / * Nustatyti skaidrės aukštį * / .vertical: target height: 250px; plotis: 97%;
Ant tikslą vertikalaus akordeono atveju mes pakeisime aukštis antraštės, kad būtų rodomas skaidrė.
.vertikali sekcija h2 pozicija: santykinis; kairėje: 0; viršuje: -15px; / * Nustatykite numerio poziciją ant skaidrių * / .vertic sekcijos: po top: -60px; kairėje: 810px; .vertinis skyrius: taikinys: po kairėje: -9999px;
Pirmiau bus pakeista poziciją ant uždaros skaidrės. Uždarius skaidrę turime nustatyti poziciją numerio, kuris yra akordeono dešinėje, skaičius. Atidarius skaidrę, reikia paslėpti šį skaičių antraštėje, kai nustatomas tikslas, kad pakeistume kairę poziciją nuo ekrano.
Dabar, kai spustelėsite akordeono antraštę, skaidrė pakeis stilių, kad būtų rodomas skaidrės turinys.
Redaktoriaus pastaba: Šį įrašą parašė Paul Underwood už Hongkiat.com. Paulius yra PHP žiniatinklio kūrėjas iš Bristolio, JK. Jis rašo vadovus apie interneto plėtrą: pagrindiniai dalykai yra PHP, jQuery, CSS3 ir HTML5. Jis taip pat įrašo naudingus kodo fragmentus „Paulund.co.uk“.
