4 viisi ainsate CSS-i ühikute loomiseks
Sisu-akordionid on kasulik disain. Neid saab kasutada paljude erinevate asjade jaoks: menüüde, nimekirjade, piltide, väljavõtete, tekstipilte ja isegi videote puhul
Enamik akordione seal toetuvad JavaScript, peamiselt jQuery'l, kuid kuna arenenud CSS3 tehnikate kasutamine on laialt levinud, leiame ka ilusaid näiteid kasutada ainult HTML ja CSS, mis muudavad need ligipääsetavaks keelatud JavaScripti keskkonnas.
Ainult CSS-i akordionide loomine võib olla keeruline ülesanne, nii et selles postituses püüame mõista peamisi kontseptsioone, mida arendajad kasutavad, kui nad seda vajavad.
Ainult CSS-i vahekaartide loomisel on tavaliselt kaks peamist lähenemisviisi, millest igaühel on kaks sagedast kasutamist. Kasutatakse esimest lähenemist peidetud vormi elemendid, teine kasutab CSS pseudo-selektorid.
1. Raadio nupu meetod
Raadio nupp meetod lisab peidetud raadiosisendi ja vastava sildi sildi akordioni igale vahele. Loogika on lihtne: kui kasutaja valib vahekaardi, kontrollivad nad põhimõtteliselt sellele vahekaardile kuuluvat raadionuppu samamoodi, kui nad täidavad vormi. Kui nad klõpsavad akordioni järgmisele vahekaardile, valivad nad järgmise raadionupu jne.
Selles meetodis, ainult üks kaart võib olla avatud samal ajal. HTML-i loogika näeb välja selline:
Sisu pealkiri (ärge kasutage h1-märgendit siin)
Mõned sisu ...
p>
Sa pead lisage igale vahekaardile eraldi raadiosaatjapaar akordionis. Ainult HTML ei anna soovitud käitumist, peate lisama ka asjakohased CSS-reeglid, vaatame, kuidas seda saavutada.
Fikseeritud kõrguse vertikaalsed vahekaardid
Selles lahenduses (vt alltoodud pilti) peitis arendaja raadionuppu kuva: pole; reegel, siis andis ta suhtelise positsiooni silt, mis omab iga vahelehe pealkirja, ja absoluutse positsiooni vastavale silt: pärast pseudoelement.
Viimane hoiab käepidet, mis on tähistatud rohelise märgiga, mis avab sakke. Suletud vahekaardid kasutavad ka rohelise märgiga käepidet “-” märgid. CSS-is valitakse suletud vahekaardid elemendi + elemendi valiku abil.
Samuti peate andma avatud vahekaardi sisu fikseeritud kõrgusele. Selleks valige elemendi1 ~ element2 CSS valiku abil avatud vahekaart (tähistatud ülaltoodud HTML-i vahekaardil)..
CSS-i põhiloogika on siin järgmine:
sisend [tüüp = raadio] kuva: pole; label position: suhteline; kuva: plokk; silt: pärast content: "+; positsioon: absoluutne; õigus: 1em; sisend: märgitud + silt: pärast sisu: "-"; sisend: kontrollitud ~ .tab-sisu kõrgus: 150 px;
Siin saab vaadata täielikku CSS-i Codepenis. CSS on algselt kirjutatud Sassis, kuid kui klõpsate “Vaade kompileeritud” nupp, näete kompileeritud CSS-faili.
Pildi ühtlustamine raadionuppudega
See ilus pildi akordion kasutab sama raadionupu meetodit, kuid etikettide asemel on arendaja siin kasutas HTML-märgist akordioni käitumine.
CSS on mõnevõrra erinev, peamiselt seetõttu, et sel juhul ei ole sakid paigutatud vertikaalselt, vaid horisontaalselt. Arendaja kasutas element + element CSS valijat (mida kasutati eelmisel juhul lülitite valimiseks), et tagada kaetud piltide servade nähtavus.
Lugege üksikasjalikku juhendit selle kohta, kuidas luua see elegantne CSS-i akordion.
2. Märkeruudu meetod
Märkeruudu meetod kasutab raadionupu asemel märkeruutu sisendit. Kui kasutaja valib vahekaardi, kontrollivad nad põhiliselt vastavat märkeruutu.
Erinevus raadionupu meetodiga on see, et see on võimalik avada korraga rohkem kui üks kaart, nagu on võimalik kontrollida rohkem kui ühte märkeruutu vormi sees.
Teisest küljest ei sulgu kaardid ise, kui kasutaja klõpsab teisel. HTML-i loogika on sama, mis varem, just sel juhul peate kasutama sisenditüübi märkeruutu.
Sisu pealkiri (ärge kasutage h1-märgendit siin)
Mõned sisu ...
p>
Fikseeritud kõrgusega märkeruut akordion
Kui soovite fikseeritud kõrgusega sisu sakke, on CSS-i loogika päris palju sama kui raadionupu puhul, see on lihtsalt sisenditüüp, mis on raadiost märkeruutu muutnud. Selles Codepeni pliiatsis saate koodi vaadata.
Fluid Height märkeruut Accordion
Kui samaaegselt on avatud rohkem kui üks kaart, võib fikseeritud kõrgusega kaartide kuvamine mõjutada negatiivselt kasutaja kogemusi, kuna akordioni kõrgus võib oluliselt kasvada. Seda saab parandada, kui teie muutke fikseeritud kõrgust vedeliku kõrguseks; see tähendab, et avatud kaartide kõrgus suureneb või väheneb vastavalt nende sisu suurusele.
Selleks peate seda tegema muutke vahekaardi sisu fikseeritud kõrgust maksimaalseks kõrguseks, ja kasutada suhtelisi ühikuid:
sisend: kontrollitud ~ .tab-sisu max-height: 50em;
Kui soovite paremini mõista, kuidas see meetod toimib, saate seda Codepenit vaadata.
3. Sihtmeetod
: sihtmärk on üks CSS3 pseudo-selektoritest. Oma abiga saate HTML-elemendi ankurmärgiga siduda järgmiselt:
Tabeli pealkiri
Vahekaardi sisu
Kui kasutaja klõpsab vahekaardi pealkirjale, avaneb kogu lõik tänu : sihtmärk pseudo-selektor ja URL muudetakse ka järgmises vormingus: www.some-url.com/#tab-1.
Avatud vahekaarti saab kujundada CSS-i abil lõik: sihtmärk … reegel. Meil on hongkiatis suur juhendaja sellest, kuidas saate luua kena CSS-i ainult akordione : sihtmärk meetod nii vertikaalsel kui ka horisontaalsel paigutusel.
Peamine puudus : sihtmärk meetod on see see muudab URL-i, kui kasutaja klõpsab vahekaartidele. See mõjutab brauseri ajalugu ja brauseri tagasi-nupp ei viida kasutajat eelmisele lehele, vaid akordioni eelmisele olekule.
4. Hover meetod
Viimast puudust saab ületada, kui me seda kasutame :hõljuma CSS pseudo-valija asemel : sihtmärk, kuid sellisel juhul ei reageeri sakid klõpsule, vaid hover-sündmusele. Trikk siin on see, mida vajate varjata avamata elemendid, või vähendada nende laiust või kõrgust - sõltuvalt vahekaartide paigutusest
Hingestatud element peab olema nähtav või akordionitöö tegemiseks seadistatud täie laiusele / kõrgusele.
Järgmised kolm CSS-i akordioni olid kõik tehtud: hover-meetodiga, klõpsates ekraanil olevate linkide all olevat linki, et vaadata koodi.
Horisontaalne kujutise ühilduvus
Võluv akordion
Hover-aktiveeritud akordion vaikimisi olekuga
