4 būdai, kaip sukurti Awesome CSS-Only akordeonus
Turinio formatai yra naudingi. Juos galite naudoti daugeliui skirtingų dalykų: meniu, sąrašų, vaizdų, straipsnių ištraukų, teksto fragmentų ir net vaizdo įrašų
Dauguma akordeonų ten pasitiki „JavaScript“, daugiausia „jQuery“, tačiau, kadangi pažangių CSS3 metodų naudojimas tapo plačiai paplitęs, taip pat galime rasti gražių pavyzdžių naudoti tik HTML ir CSS, kad jie būtų prieinami aplinkose, kuriose veikia „JavaScript“.
Vien tik CSS-akordeonų kūrimas gali būti sudėtinga užduotis, todėl šiame pranešime bandysime suprasti pagrindines sąvokų kūrėjas, kai jos turi sukurti.
Kuriant tik CSS skirtukus, paprastai yra du pagrindiniai metodai, kiekvienas iš jų turi du dažnai naudojamus atvejus. Pirmasis požiūris naudojamas paslėptos formos elementai, o antrasis naudojasi CSS pseudo selektoriai.
1. Radijo mygtuko metodas
Radijo mygtuko metodas prideda paslėptą radijo įvestį ir atitinkamą etiketės žymą kiekvienam akordeono skirtui. Logika yra paprasta: kai vartotojas pasirenka skirtuką, jie iš esmės patikrina tą skirtuką atitinkantį radijo mygtuką, tokiu pat būdu, kai užpildo formą. Kai jie spustelės kitą skirtuką akordeone, jie pasirenka kitą radijo mygtuką ir pan.
Šiuo metodu, gali būti atidarytas tik vienas skirtukas Tuo pačiu metu. HTML logika atrodo taip:
Turinio pavadinimas (nenaudokite h1 žymos čia)
Kai kuris turinys ...
p>
Tau reikia pridėkite atskirą radijo etiketės porą kiekvienam skirtukui akordeone. Vien tik HTML nesuteiks norimo elgesio, taip pat turite pridėti atitinkamas CSS taisykles, pažiūrėkime, kaip tai padaryti.
Fiksuoto aukščio vertikalūs skirtukai
Šiame sprendime (žr. Paveikslėlį žemiau) kūrėjas paslėpė radijo mygtuką ekranas: nėra; taisyklė, tada jis davė santykinę poziciją etiketės žymei, kurioje yra kiekvieno skirtuko pavadinimas, ir absoliučią padėtį atitinkamoje etiketė: po pseudo elementas.
Pastarasis turi rankeną, pažymėtą žaliu + ženklu, kuris atveria skirtukus. Uždarose kortelėse taip pat naudojamas žalias ženklas “-” ženklai. CSS uždarieji skirtukai pasirenkami elemento + elemento selektoriaus pagalba.
Jūs taip pat turite pateikti atviro skirtuko turinį fiksuotu aukščiu. Norėdami tai padaryti, pasirinkite elemento1 ~ element2 CSS selektoriaus atidaryto skirtuko korpusą (pažymėtą skirtuko turinio klase aukščiau esančiame HTML).
Pagrindinė CSS logika yra tokia:
įvestis [type = radio] display: none; etiketė pozicija: santykinis; ekranas: blokas; etiketė: po content: "+"; pozicija: absoliutus; teisė: 1em; įvestis: pažymėtas + etiketė: po turinys: "-"; įvestis: patikrinta ~ .tab-content height: 150px;
Čia galite pažiūrėti visą CSS čia „Codepen“. CSS iš pradžių parašyta Sass'e, bet jei spustelėsite “Žiūrėti rinkinį” mygtukas, galite matyti sukurtą CSS failą.
Vaizdo suderinimas su radijo mygtukais
Šis gražus vaizdo akordeonas naudoja tą patį radijo mygtuko metodą, o vietoj etikečių kūrėjas čia naudojo HTML formato žymą atlikti akordeono elgesį.
CSS yra šiek tiek kitoks, daugiausia todėl, kad šiuo atveju skirtukai nėra išdėstyti vertikaliai, bet horizontaliai. Kūrėjas naudojo elemento + elemento CSS selektorių (kuris buvo naudojamas ankstesniu atveju, norėdami pasirinkti perjungimus), kad užtikrintų, jog padengtų vaizdų kraštai vis dar bus matomi.
Perskaitykite išsamų vadovą apie tai, kaip sukurti šį elegantišką CSS vienintelį akordeoną.
2. žymės langelio metodas
Pažymėjimo langelio metodas naudoja žymės langelio įvesties tipą vietoj radijo mygtuko. Kai vartotojas pasirenka skirtuką, jie iš esmės patikrina atitinkamą žymės langelį.
Skirtumas, palyginti su radijo mygtuko metodu, yra tas, kad jis yra galima vienu metu atidaryti daugiau nei vieną skirtuką, kaip ir galima patikrinti daugiau nei vieną žymės langelį formoje.
Kita vertus, skirtukai nebus uždaryti patys, kai vartotojas spustelės kitą. HTML logika yra tokia pati, kaip ir anksčiau, šiuo atveju reikia naudoti įvesties tipo žymės langelį.
Turinio pavadinimas (nenaudokite h1 žymos čia)
Kai kuris turinys ...
p>
Fiksuotas aukščio žymės langelis
Jei norite fiksuoto aukščio turinio skirtukus, CSS logika yra beveik tokia pati, kaip ir radijo mygtuko atveju, tai tik įvesties tipas pasikeitė iš radijo į žymimąjį langelį. Šiame „Codepen“ rašikliu galite pažvelgti į kodą.
Skysčio aukščio žymės langelis
Kai tuo pačiu metu atidaryti daugiau nei vienas skirtukas, fiksuoto aukščio skirtukų rodymas gali neigiamai paveikti naudotojo patirtį, nes akordeono aukštis gali žymiai išaugti. Tai gali būti pagerinta, jei jūs pakeisti nustatytą aukštį iki skysčio aukščio; tai reiškia, kad atvirų skirtukų aukštis padidėja arba sumažėja pagal turimo turinio dydį.
Norėdami tai padaryti, jums reikia keisti fiksuoto skirtuko turinio aukštį iki maksimalaus aukščio, ir naudoti santykinius vienetus:
įvestis: patikrinta ~ .tab-content max-height: 50em;
Jei norite geriau suprasti, kaip šis metodas veikia, galite pažvelgti į šį kodą.
3. Tikslinis metodas
: taikinys yra vienas iš CSS3 pseudo selektorių. Su pagalba galite susieti HTML elementą su ankeriniu žyma taip:
Skirtuko pavadinimas
Skirtuko turinys
Kai vartotojas spustelės skirtuko pavadinimą, visas skyrius bus atidarytas : tikslas pseudo-selektorius ir URL bus pakeistas taip: www.some-url.com/#tab-1.
Atidarytas skirtukas gali būti sukurtas CSS naudojant skyrius: taikinys … taisyklė. Mes turime puikią pamoką apie hongkiat apie tai, kaip galite sukurti gražią CSS tik akordeoną su : tikslas metodas tiek vertikaliai, tiek horizontaliai.
Pagrindinis. \ T : tikslas metodas yra toks jis pakeičia URL, kai vartotojas spusteli ant skirtukų. Tai veikia naršyklės istoriją, o naršyklės atgalinis mygtukas neperduos naudotojo į ankstesnį puslapį, bet ankstesnę akordeono būseną.
4. „Hover“ metodas
Pastarasis trūkumas gali būti įveiktas, jei panaudosime : Pakimba CSS pseudo selektorius vietoj : tikslas, tačiau tokiu atveju skirtukai nereaguoja į paspaudimą, bet į lauko įvykį. Čia apgauti yra tai, kad jums reikia arba paslėpti neatskirtus elementus, arba sumažinti jų plotį arba aukštį - priklausomai nuo skirtukų išdėstymo
Norint padaryti akordeoną, turi būti matomas elementas, kurio elementas turi būti matomas, arba nustatyti visą plotį / aukštį.
Visi trys tik „CSS“ akordeonai buvo sukurti naudojant „hover“ metodą, spustelėję žemiau esančias nuorodas, kad pamatytumėte kodą.
Horizontalus vaizdo akordeonas
Skersinis akordeonas
Hover-Activated Accordion su numatytąją būseną
