4 tapaa luoda Awesome CSS-vain harmonioita
Sisällön harmoniset tekevät hyödyllisen mallin. Voit käyttää niitä monissa eri asioissa: valikoissa, luetteloissa, kuvissa, artikkelin otteissa, tekstinpätkissä ja jopa videoissa
Useimmat harmonikot siellä luottavat JavaScript, lähinnä jQuery, mutta koska kehittyneiden CSS3-tekniikoiden käyttö on yleistynyt, voimme myös löytää hyviä esimerkkejä Käytä vain HTML: ää ja CSS: ää, jotka tekevät ne saataville ympäristöissä, joissa on JavaScript.
CSS-vain harmonikkojen luominen voi olla hankala tehtävä, joten yritämme ymmärrä tärkeimmät kehittäjien käyttämät käsitteet, kun he tarvitsevat sellaisen.
CSS-välilehtiä luodessasi on yleensä kaksi pääkäytäntöä, joista kullakin on kaksi toistuvaa käyttöä. Ensimmäinen lähestymistapa on käytössä piilotetut lomakkeen elementit, kun taas toinen käyttää CSS-pseudo-valitsimet.
1. Radio Button Method
Radio Button Method -toiminnolla lisätään piilotettu radiotulo ja vastaava tarratunniste harmonikan jokaiselle välilehdelle. Logiikka on yksinkertainen: kun käyttäjä valitsee välilehden, ne tarkistavat periaatteessa kyseiseen välilehteen kuuluvan valintanapin samalla tavalla, kun ne täyttävät lomakkeen. Kun ne napsauttavat harmonikassa seuraavaa välilehteä, ne valitsevat seuraavan radiopainikkeen jne.
Tässä menetelmässä, vain yksi välilehti voi olla auki samaan aikaan. HTML: n logiikka näyttää tältä:
Sisällön otsikko (älä käytä h1-tagia täällä)
Jotkut sisällöt…
p>
Sinun täytyy lisää erillinen radio-merkkipari kullekin välilehdelle harmoniassa. Pelkästään HTML ei anna haluttua käyttäytymistä, sinun on lisättävä myös asianmukaiset CSS-säännöt, katsotaanpa miten voit saavuttaa sen.
Kiinteät korkeussuuntaiset välilehdet
Tässä ratkaisussa (katso alla oleva kuvakaappaus) kehittäjä piilotti radiopainikkeen näyttö: ei; Sitten hän antoi suhteellisen sijainnin etiketitunnisteelle, joka pitää kunkin välilehden otsikon, ja absoluuttisen sijainnin vastaavaan kohtaan julkaisija: jälkeen pseudo-elementti.
Jälkimmäinen pitää kahvaa, joka on merkitty vihreällä + merkillä, joka avaa välilehdet. Suljetut kielekkeet käyttävät myös vihreällä merkityn kahvan “-” merkkejä. CSS: ssä suljetut välilehdet valitaan elementin + elementinvalitsimen avulla.
Sinun on myös annettava avoimen välilehden sisältö kiinteälle korkeudelle. Voit tehdä tämän valitsemalla avoimen välilehden rungon (merkitty yllä olevan HTML-välilehden välilehdellä) elementin1 ~ element2 CSS -valitsimen avulla.
CSS: n peruslogiikka on seuraava:
tulo [tyyppi = radio] näyttö: ei; label position: suhteellinen; näyttö: lohko; etiketti: jälkeen content: "+"; asema: absoluuttinen; oikea: 1em; input: check + etiketti: sen jälkeen, kun content: "-"; input: check ~ .tab-content korkeus: 150px;
Voit tarkastella CSS: ää täällä Codepenissä. CSS on alun perin kirjoitettu Sassiin, mutta jos napsautat “Näytä koottu” -painiketta, näet kootun CSS-tiedoston.
Kuva-harmonia radiopainikkeiden kanssa
Tämä kaunis kuvan harmonikka käyttää samaa radiopainemenetelmää, mutta tarrojen sijaan kehittäjä täällä käyttää figcaption HTML-tagia harmonian käyttäytyminen.
CSS on hieman erilainen, lähinnä siksi, että tällöin välilehdet eivät ole pystysuorassa vaan vaakasuorassa. Kehittäjä käytti elementin + elementin CSS-valitsinta (jota käytettiin edellisessä tapauksessa vaihtokytkimien valitsemiseksi) varmistaakseen, että katettujen kuvien reunat pysyvät edelleen näkyvissä.
Lue yksityiskohtainen opas tämän tyylikkään CSS-ainoan harmonikan luomisesta.
2. Valintaruutu
Valintaruudun menetelmä käyttää valintaruudun syöttötyyppiä radiopainikkeen sijaan. Kun käyttäjä valitsee välilehden, ne tarkistavat periaatteessa vastaavan valintaruudun.
Rajapainomenetelmään verrattuna ero on se, että se on voidaan avata useampi kuin yksi välilehti samanaikaisesti, aivan kuten on mahdollista tarkistaa useampi kuin yksi valintaruutu lomakkeen sisällä.
Toisaalta välilehdet eivät sulkeudu itseään, kun käyttäjä napsauttaa toista. HTML: n logiikka on sama kuin aiemmin, juuri tässä tapauksessa sinun on käytettävä syöttötyypin valintaruutua.
Sisällön otsikko (älä käytä h1-tagia täällä)
Jotkut sisällöt…
p>
Kiinteä korkeus -valintaruutu
Jos haluat kiinteän korkeussisällön välilehdet, CSS: n logiikka on melko sama kuin radiopainekotelossa, se on vain syöttötyyppi on muuttunut radiosta valintaruutuun. Tässä Codepen-kynässä voit tarkastella koodia.
Fluid Height -valintaruutu
Kun useampi kuin yksi välilehti on auki samanaikaisesti, kiinteän korkeuden välilehdet voivat vaikuttaa negatiivisesti käyttäjäkokemukseen, kun harmonikkakorkeus voi kasvaa merkittävästi. Tätä voidaan parantaa, jos muuttaa kiinteää korkeutta nesteen korkeuteen; se tarkoittaa, että avoimien välilehtien korkeus laajenee tai kutistuu pitämänsä sisällön koon mukaan.
Voit tehdä niin muokkaa välilehden sisällön korkeutta korkeuteen, ja käyttää suhteellisia yksiköitä:
tulo: tarkistettu ~ .tab-sisältö max-korkeus: 50em;
Jos haluat ymmärtää paremmin, miten tämä menetelmä toimii, voit tarkastella tätä Codepenia.
3. Kohde-menetelmä
: kohde on yksi CSS3: n pseudo-selektoreista. Sen avulla voit liittää HTML-elementin ankkuritunnisteeseen seuraavasti:
Välilehden nimi
Välilehden sisältö
Kun käyttäjä napsauttaa välilehden nimeä, koko osa avautuu :kohde pseudo-valitsin ja URL-osoite muutetaan myös seuraavaan muotoon: www.some-url.com/#tab-1.
Avoin välilehti voidaan muotoilla CSS: n avulla osio: kohde … sääntö. Meillä on hieno opetusohjelma täällä hongkiatissa siitä, miten voit luoda mukavia CSS-vain harmonioita :kohde menetelmä sekä pysty- että vaakasuunnassa.
Tärkein puutos :kohde menetelmä on se se muuttaa URL-osoitetta, kun käyttäjä napsauttaa välilehtiä. Tämä vaikuttaa selaimen historiaan ja selaimen taaksepäin-painike ei vie käyttäjää edelliselle sivulle, vaan harmonikan edelliselle tilalle.
4. Hover-menetelmä
Tämä jälkimmäinen puute voidaan ratkaista, jos käytämme sitä : hover CSS-pseudo-valitsin :kohde, mutta tässä tapauksessa välilehdet eivät reagoi napsautukseen vaan hover-tapahtumaan. Tässä on temppu, että sinun täytyy joko piilottaa avaamattomat elementit, tai vähentää niiden leveyttä tai korkeutta - riippuen välilehtien asettelusta
Hovered-elementti on tehtävä näkyväksi tai asetettava koko leveydelle / korkeudelle, jotta harmonikka toimii.
Seuraavat kolme CSS-vain harmoniaa tehtiin: hover-menetelmällä, klikkaamalla alla olevien kuvien alla olevia linkkejä, kun haluat tarkastella koodia.
Horisontaalinen kuvan harmonia
Taivutettu akordion
Hover-aktivoitu harmonia oletusvaltion kanssa
