Kā izveidot CSS balstītu satura harmoniju
Šodienas apmācībā mēs uzzināsim, kā mēs varam izveidot horizontāla un vertikāla satura akordeons, izmantojot tikai CSS3. Ir daudzi jQuery spraudņi, kas var darīt šo darbu jums, bet ko jūs darāt, ja apmeklētājs ir izslēgts Javascript, tad akordeons nedarbosies pareizi. Ja jūsu akordeons ir tikai CSS, tas darbosies visiem jūsu apmeklētājiem.
Mēs radīsim a horizontāli un vertikāli satura akordeons. Noklikšķinot uz virsraksta teksta, slaids atvērsies, parādot pilnu saturu, un šeit ir ātrs priekšskatījums (ekrānuzņēmumi), kā viņi izskatās.
Tāpat kā tas, ko jūs redzat? Ļaujiet kodēšanai sākt!
1. HTML un satura sagatavošana
Vispirms mēs izveidosim akordeona HTML.
Struktūrai ir nepieciešams konteiners div un pēc tam ir a sadaļā par katru slaidu akordeonā. Šajā piemērā mums būs 5 slaidi. Katram no slaidiem būs satura nosaukums un punkts.
Par mums
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
Pakalpojumi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
Blogs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
Portfolio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
Kontakti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
Tagad mums ir mūsu slaidi, kurus mēs varam sākt harmonizēt.
2. CSS stils
Vispirms mums ir jāveido saturošais div akordeons. Tas dos mums priekšstatu par to, kā attēlot katru no slaidiem un katru virsrakstu.
/ * Definēt akordeona lodziņu * / .accordion platums: 830px; pārplūde: slēpta; starpība: 10px auto; krāsa: # 474747; fons: # 414141; polsterējums: 10px;
Tālāk mēs izveidosim virsrakstus katram no slaidiem.
.akordeona daļa float: pa kreisi; pārplūde: slēpta; krāsa: # 333; kursors: rādītājs; fons: # 333; starpība: 3px; . akordeona sekcija: lidināties fons: # 444;
Sadaļā fona krāsa ir tumši pelēka, lai tā būtu virsraksts, kur apmeklētāji noklikšķinās, lai parādītu slaidu. Mēs izmantojam šo sadaļu gan virsrakstam, gan saturam, kas nozīmē, ka mēs varam izmantot mazāk HTML un atkārtoti izmantot slaida nosaukumu kā satura virsrakstu.
.akordeona daļa p displejs: nav;
Šobrīd visi slaidi tiks aizvērti, tāpēc mums ir jāpārliecinās, ka punkts ir paslēpts no skata, līdz slaids ir atvērts, tāpēc tagad iestatiet punkta rādīšanu nevienam.
.akordeona sekcija: pēc pozīcija: relatīvais; fonta lielums: 24px; krāsa: # 000; font-weight: bold; . akordeons: n-bērns (1): pēc saturs: '1'; . akordeons: n-bērns (2): pēc saturs: '2'; . akordeons: n-bērns (3): pēc saturs: “3”; . akordeons: n-bērns (4): pēc saturs: “4”; . akordeons: n-bērns (5): pēc saturs: '5';
Aizverot slaidus, mēs vēlamies, lai virsraksta apakšdaļā tiktu rādīts numurs, lai norādītu, kuru numuru slaidu mēs esam. Šim nolūkam mēs izmantosim CSS, lai pievienotu saturu pēc sadaļas virsraksta, to var izdarīt, izmantojot : pēc pseidogrupas selektors.
Tagad mēs esam izveidojuši virsrakstu slaidam, kuru mēs varam padarīt klikšķa notikumu, lai parādītu slaidu akordeonā. Bet pastāv problēma, CSS nav klikšķu notikuma, tāpēc akordeons parasti tiek izveidots, izmantojot jQuery, lai mēs varētu pievienot klikšķa notikumu virsraksta tekstam.
Mums ir nepieciešams atdarināt klikšķa notikumu CSS, ko var izdarīt, izmantojot : Mērķis pseidogrupas selektors.
3. Lietošana : Mērķis pseido klases selektors
: Mērķis ļauj veidot fragmenta identifikatoru. Dažreiz mēs izmantojam lappuses enkura tagu, lai norādītu uz vietu lapā. Noklikšķinot uz saites ID enkura tagā kļūst par mērķi, un to var veidot, izmantojot : Mērķis selektoru.
Lai to pievienotu akordeonā, mums ir jāpievieno saite ap virsrakstu, kas norāda uz ID no slaida.
Par mums
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sēdēt amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Lacinia magna molestie. Etiam placerat sakrīt ar dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Citur neklasificētais ekvivalents, ne tikai pusperiods. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat nav, fringilla vel eros. Nam vehicula elementum nulla sed izriet. Phasellus eu erat enim. Prezentācija pie magna non massa dapibus scelerisque es lorem.
.akordeona sadaļa: mērķis fons: #FFF; polsterējums: 10px; .kritēriju sadaļa: mērķis: lidināties fons: #FFF; akordeons: mērķa h2 platums: 100%; akordeons: mērķa h2 a krāsa: # 333; polsterējums: 0; . akordeons: mērķa p displejs: bloks; . akordiona daļa h2 a polsterējums: 8px 10px; displejs: bloks; fonta lielums: 16px; fontu svars: normāls; krāsa: #eee; teksta apdare: nav;
Iepriekš minētais kods mainīs slaida izmēru, lai tas atbilstu pārējam akordeonam, un mainīs fona krāsu uz baltu. Punkts tika paslēpts tā, ka tagad ir jānorāda punkts.
Tagad, kad noklikšķināsiet uz akordeona virsraksta, slaids mainīs stilu, lai parādītu slaida saturu.
4. Horizontālais akordeons
Iepriekš minētais kods radīs vispārējo akordeonu, tagad mēs varam sākt veikt CSS izmaiņas attiecībā uz atšķirībām starp horizontālo un vertikālo akordeonu. Abiem šiem akordeoniem ir vienāda funkcionalitāte, bet virsraksta stils būtu atšķirīgs.
.horizontālā sekcija platums: 5%; augstums: 250 pikseļi; -moz-pāreja: platums 0.2s vieglums; -webkit pāreja: platums 0.2s vieglumu; -o-pāreja: platums 0.2s vieglums; pāreja: platums 0.2s vieglums;
Vispirms mēs iestatām platums virsraksta daļa līdz 5%, lai tā būtu slēgta slaida. Tā kā sadaļa ir gan virsraksts, gan saturs slaidam, mums jāpievieno animācija, lai parādītu saturu, izmantojot pārejas īpašumu.
/ * Novietojiet slaidu skaitu * / .horizontal section: pēc top: 140px; pa kreisi: 15px;
Numura novietojums uz slaida būs tāds pats kā katrā slēgtajā virsrakstā, kas atrodas citādi nekā vertikālie virsraksti.
/ * Aizvērtā slaida * / .horizontal section h2 -webkit-transform: rotēt (90deg) galvene; -moz-transform: pagriezt (90deg); -o-transformēt: pagriezt (90deg); transformēt: pagriezt (90deg); platums: 240px; pozīcija: relatīvais; pa kreisi: -100px; tops: 85px; / * Uz peles virs atvērta slaida * / .horizontal: target platums: 73%; augstums: 230px; . horizontālais: mērķa h2 top: 0px; pa kreisi: 0; -webkit-transform: rotēt (0deg); -moz-transform: rotēt (0deg); -o-transformēt: pagriezt (0deg); transformēt: pagriezt (0deg);
Iepriekš minētais kods mainīs slaida lielumu, lai tas atbilstu pārējam akordeonam. Virsraksts tika pagriezts vertikāli, lai samazinātu virsrakstu, bet tagad, atverot slaidu, ir jāmaina teksts, lai tas būtu horizontāls, pagriežot tekstu atpakaļ uz 0 grādiem.
5. Vertikālā harmonija
Vertikālais akordeons darbojas tāpat kā horizontālais akordeons, izņemot, ka mums ir jāmaina augstums nevis platums un mums nav jāmaina teksta saskaņošana.
.vertikālā daļa platums: 100%; augstums: 40px; -webkit-pāreja: augstums 0.2s vieglums; -moz-pāreja: augstums 0.2s vieglums; -o-pāreja: augstums 0.2s vieglums; pāreja: augstums 0.2s vieglums; / * Iestatiet slaida augstumu * / .vertical: target height: 250px; platums: 97%;
Uz mērķi vertikālā akordeona gadījumā mēs mainīsim augstums lai parādītu slaidu.
.vertikālā daļa h2 pozīcija: relatīvais; pa kreisi: 0; tops: -15px; / * Iestatiet numura pozīciju uz slaida * / .vertical sadaļā: pēc top: -60px; pa kreisi: 810px; .virziena sadaļa: mērķis: pēc pa kreisi: -9999px;
Iepriekšminētais mainīs pozīciju virsraksta tekstu uz aizvērtā slaida. Ar aizvērto slaidu mums ir jāiestata pozīciju no skaita, kas atrodas akordeona labajā pusē. Kad slaids ir atvērts, šis numurs ir jānovieto virsrakstā, kad mērķis ir iestatīts, lai mēs mainītu kreiso pozīciju no ekrāna.
Tagad, kad noklikšķināsiet uz akordeona virsraksta, slaids mainīs stilu, lai parādītu slaida saturu.
Redaktora piezīme: Šo ziņu raksta Paul Underwood par Hongkiat.com. Paul ir PHP tīmekļa izstrādātājs no Bristoles, Apvienotā Karaliste. Viņš raksta konsultācijas par Web Development: galvenie priekšmeti ietver PHP, jQuery, CSS3 un HTML5. Viņš arī ieraksta noderīgus koda fragmentus Paulund.co.uk.
