Kuidas luua CSS-põhine sisuühilduvus
Tänases juhendis õpime, kuidas me saame luua a horisontaalne ja vertikaalne sisu akordion, kasutades lihtsalt CSS3. Seal on palju jQuery pluginaid, mis suudavad seda tööd teha, aga mida teete, kui külastaja on Javascript välja lülitatud, siis akordion ei tööta korralikult. Kui teie akordion on ainult CSS-s, siis töötab see kõikidele külastajatele.
Me loome a horisontaalne ja vertikaalne sisu akordion. Pealkirja tekstile klõpsates avaneb slaid kogu sisu kuvamiseks ja siin on kiire eelvaade (ekraanipildid), kuidas nad näevad välja.
Nagu see, mida sa näed? Lase kodeerimine alustada!
1. HTML ja sisu ettevalmistamine
Kõigepealt loome akordioni jaoks HTML-i.
Struktuur vajab konteinerit div ja seejärel on a lõik akordioni iga slaidi kohta. Selles näites on meil 5 slaidi. Igal slaidil on sisu jaoks pealkiri ja lõik.
Meist
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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli lorem.
Teenused
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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli lorem.
Blogi
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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli lorem.
Portfell
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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli 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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli lorem.
Nüüd on meil slaidid, mida me saame hakata harmoniseerima.
2. CSS-stiil
Kõigepealt peame me sisustama div akordionist. See annab meile ülevaate, kuidas kuvada iga slaidi ja iga pealkirja.
/ * Määrake akordionkast * / .accordion width: 830px; ülevool: peidetud; marginaal: 10px auto; värv: # 474747; taust: # 414141; polsterdus: 10px;
Seejärel loome iga slaidi kohta pealkirjad.
.akordioniosa float: vasakul; ülevool: peidetud; värv: # 333; kursor: pointer; taust: # 333; varu: 3px; .kordi sektsioon: hover background: # 444;
Me seadistame sektsiooni taustavärvi tumehalliks, et see oleks pealkiri, kus külastajad saavad slaidi kuvamiseks klõpsata. Me kasutame seda jaotist nii pealkirja kui ka sisu jaoks, mis tähendab, et saame kasutada vähem HTML-i ja kasutada slaidi pealkirja sisu pealkirjana.
.akordioni sektsioon p kuva: pole;
Praegu on kõik slaidid suletud, nii et me peame tagama, et lõik on peidetud, kuni slaid on avatud, nii et nüüd seadke lõike kuvamine mitte ühelegi.
.akordioniosa: pärast positsioon: sugulane; fondi suurus: 24px; värv: # 000; fondi kaal: rasvane; .kordi sektsioon: n-laps (1): pärast sisu: 1 ”; .kordi sektsioon: n-laps (2): pärast sisu: 2 ”; .kordi sektsioon: n-laps (3): pärast sisu: 3 ”; .kordi sektsioon: n-laps (4): pärast sisu: 4 ”; .kordi sektsioon: n-laps (5): pärast sisu: 5 ”;
Suletud slaididega tahame näidata pealkirja all olevat numbrit, et öelda, milline numbriklapp me oleme. Selleks kasutame CSS-i sisu lisamiseks pärast sektsiooni pealkirja, seda saab teha : pärast pseudo-klassi valija.
Nüüd oleme loonud slaidi pealkirja, mida me saame teha klikkimise ürituseks slaidi näitamiseks akordionis. Probleem on aga selles, et CSS-il pole klõpsuüritust, mistõttu akordion luuakse tavaliselt jQuery abil, et saaksime pealkirjateksti juurde klõpsata..
Me peame jäljendama CSS-i klikkimise sündmust, mida saab teha : sihtmärk pseudo-klassi valija.
3. Kasutamine : sihtmärk pseudo-klassi selektor
: sihtmärk võimaldab meil kujundada fragmendi identifikaatorit. Mõnikord me kasutame lehekülje ankrusilti, et osutada lehele kohale. Klõpsates lingil link id ankurmärgis saab sihtmärgiks ja saate seda kujundada : sihtmärk valija.
Selle lisamiseks akordionisse peame lisama pealkirja ümber linki, mis näitab id slaidist.
Meist
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. Alquam semper mauris sit amet justo mistahes mujal lacinia magna molestie. Etiam on kohanenud dolor vitae adipiscing'iga. Alikvoot ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Mujal nimetamata alikvoot justo ante, mitte semper mi. Nulla consectetur interdum massa, va porta enim vulputate sed. Maecenas elit quam, nt. Nam vehicula elementum nulla sed järelikult. Phasellus eu erat enim. Esitatakse magna non massa dapibus scelerisque'is eli lorem.
.akordioniosa: sihtmärk (taust: #FFF; polsterdus: 10px; .kordi sektsioon: sihtmärk: hover background: #FFF; .kordi sektsioon: sihtmärk h2 laius: 100%; .kordi sektsioon: sihtmärk h2 a värvus: # 333; polster: 0; .kordi sektsioon: sihtmärk p kuva: plokk; .kordi sektsioon h2 a polster: 8px 10px; kuva: plokk; fondi suurus: 16px; fondi kaal: normaalne; värv: #eee; teksti kaunistus: mitte;
Ülaltoodud kood muudab slaidi suurust, et see sobiks ülejäänud akordioniga, ja muudab taustavärvi valgeks. Punkt oli nii peidetud nii sihiks, et me peame lõike näitama.
Nüüd, kui klõpsate akordioni pealkirjale, muudab slaid stiili, et kuvada slaidi sisu.
4. Horisontaalne akordion
Ülaltoodud kood loob üldise akordioni, nüüd saame alustada CSS-i muutmist horisontaalse ja vertikaalse akordioni erinevuste vahel. Mõlemal akordionil on samasugused funktsioonid, kuid pealkirja stiil oleks teistsugune.
.horisontaalne sektsioon laius: 5%; kõrgus: 250 px; -moz-üleminek: laius 0.2s-out; -webkit-üleminek: laius 0.2s lihtsus; -o-üleminek: laius 0.2s lihtsus; üleminek: laius 0.2s lihtsus;
Kõigepealt seadistame laius pealkirja osa 5% ni, nii et see on suletud slaid. Kuna sektsioon on nii pealkirja kui ka slaidi sisu, peame sisu lisamiseks kasutama animatsiooni, kasutades ülemineku-omadust.
/ * Aseta slaidi number * / .horizontal section: pärast top: 140px; vasakule: 15tk;
Slaidil oleva numbri asukoht on igas suletud pealkirjas sama, mis on vertikaalsete pealkirjadega erinevalt paigutatud.
/ * Suletud slaidi * / .horizontal section h2 (-webkit-transform: rotate (90deg)) päis; -moz-transform: pöörake (90deg); -o-transformatsioon: pöörata (90deg); transform: pöörake (90deg); laius: 240 px; positsioon: suhteline; vasakule: -100px; top: 85px; / * Hiirel avatud slaidi * / .horizontal korral: sihtmärk laius: 73%; kõrgus: 230 pikslit; . horisontaalne: sihtmärk h2 top: 0px; vasakul: 0; -webkit-transform: pöörake (0deg); -moz-transform: pöörake (0deg); -o-transform: pöörake (0deg); transform: rotate (0deg);
Ülaltoodud kood muudab slaidi suurust, et see sobiks ülejäänud akordioniga. Pealkiri pöörati vertikaalselt, et peatada pealkiri, kuid nüüd, kui slaid on avatud, peame teksti tagasi horisontaalseks muutma, pöörates teksti tagasi 0 kraadini.
5. Vertikaalne harmoonia
Vertikaalne akordion töötab samamoodi nagu horisontaalne akordion, välja arvatud siis, kui me peame muutma kõrgus asemel laius ja me ei pea muutma teksti joondamist.
.vertikaalne sektsioon laius: 100%; kõrgus: 40px; -webkit-üleminek: kõrgus 0.2s lihtne; -moz-üleminek: kõrgus 0.2s lihtne; -o-üleminek: kõrgus 0.2s lihtsus; üleminek: kõrgus 0.2s lihtne; / * Slaidi kõrguse seadistamine * / .vertical: target height: 250px; laius: 97%;
Sisse sihtmärk vertikaalse akordioni puhul me muudame kõrgus slaidi kuvamiseks.
.vertikaalne osa h2 positsioon: suhteline; vasakul: 0; top: -15px; / * Seadistage numbri asukoht slaidil * / .vertical section: pärast top: -60px; vasakule: 810px; .vooluosa: sihtmärk: pärast vasakul: -9999px;
Ülaltoodud muudab positsiooni pealkirja tekst suletud slaidil. Suletud slaidiga peame määrama positsiooni arv, mis asub akordioni paremal pool. Kui slaid on avatud, peame selle numbri pealkirjas peitma, kui sihtmärk on seatud, nii et me muudame vasakpoolse asukoha ekraanilt.
Nüüd, kui klõpsate akordioni pealkirjale, muudab slaid stiili, et kuvada slaidi sisu.
Toimetaja märkus: See postitus on kirjutatud Paul Underwood Hongkiat.com jaoks. Paul on PHP veebiarendaja Bristolist, Suurbritannias. Ta kirjutab õpetusi veebiarenduse kohta: peamised teemad on PHP, jQuery, CSS3 ja HTML5. Ta salvestab ka kasulikke koodipilte Paulund.co.uk'is.
