CSS akordeonai plačiai naudojami išplečiamiems ir sutraukiamiems meniu, fragmentams, vaizdams, vaizdo įrašams, DUK, sąrašams ir straipsnių ištraukoms. Galite lengvai juos sukurti naudodami HTML, CSS ir JavaScript (arba jQuery). Tik CSS akordeonų kūrimas yra šiek tiek sudėtinga užduotis, tačiau tai labai naudinga aplinkoje, kurioje išjungtas „JavaScript“.

Šiame vadove sužinosite nuoseklų metodą, kaip sukurti tik CSS akordeoną.

Pagrindinio akordeono kūrimas naudojant tik HTML

Jei jūsų prioritetas yra sukurti prieinamą akordeoną naudojant HTML, ir žymės yra kelias. Nesvarbu, kurią programavimo kalbą naudojate, tik HTML akordeonas išliks nepakitęs. Sukurti pažymėkite kaip tėvą ir įveskite klausimą į a žyma. A viduje parašykite aprašomąjį atsakymą žyma. Pakartokite procesą, kad gautumėte bet kokį DUK skaičių.

DUK 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



DUK 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






DUK 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Akordeono stilius

Galite pritaikyti akordeoną reguliuodami fono spalva, pasienio spindulys, marža, kamšalasir kt.

kūnas {
 šriftų šeima: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
 maksimalus plotis: 30rem;
 paraštė: 1,5 rem auto;
}
santrauka {
 šrifto svoris: 600;
 spalva: rgb (255, 255, 255);
 fono spalva: rgb (7, 185, 255);
 paminkštinimas: 1.2rem;
 paraštė-apačia: 1,2rem;
 kraštinės spindulys: 0,5rem;
 žymeklis: rodyklė;
}

Išvestis:

Vienintelis apribojimas yra tas, kad jūs negalėsite valdyti kiekvienos kodo dalies. HTML struktūrą galima keisti, bet negalite sukurti pasirinktinio akordeono. Todėl sukurkime pasirinktinį DUK skyrių naudodami išplėstinį CSS.

Sukurkite savo pasirinktinį DUK skyrių

Yra du populiarūs būdai, kaip sukurti pasirinktinį tik CSS akordeoną. Galite naudoti žymimuosius laukelius arba radijo mygtukus; mes paaiškinsime abu būdus.

Žymėjimo laukelio metodo naudojimas

Naudojamas žymės langelio metodas žymimasis langelis kaip įvesties tipą. Kai vartotojas pasirenka skirtuką, pažymi žymimąjį laukelį ir jis atsidaro. Galite atidaryti kelis skirtukus vienu metu naudodami žymimąjį laukelio metodą, panašiai kaip galite pažymėti daugiau nei vieną žymimąjį laukelį HTML forma.

HTML

Tinkintas tik CSS akordeonas (DUK)

Naudojant žymės langelio metodą






Kaip sukurti pasirinktinį akordeoną naudojant tik CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 guessnda a, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Kaip pakeisti pseudoelementų aukštį?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus extrauri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 smerkti veidą ex hic ipsa odit in! Eveniet.

Bendra CSS

Taikykite pagrindinį CSS ant kūno.

kūnas {
 spalva: #502c2c;
 fonas: #f1edec;
 paminkštinimas: 1.2rem;
 šriftų šeima: „Segoe UI“, Tahoma, Ženeva, Verdana, sans-serif;
 maksimalus plotis: 45rem;
 paraštė: 0 automatinis;
 šrifto dydis: 1.2rem;
}

Akordeono stilius

Pirmiausia paslėpkite žymimuosius laukelius pakeisdami įvestį.

/* Paslėpti žymimuosius laukelius arba radijo mygtuką*/
input {
 padėtis: absoliuti;
 neskaidrumas: 0;
 z indeksas: -1;
}

Dabar sukurkite akordeoną. Galite pridėti:: po pseudoelementas + ženklas. Galite kreiptis į a Simbolių objekto nuorodos diagrama ir naudokite bet kurį Objekto konvertavimo skaičiuoklė norėdami rasti skaitinės reikšmės CSS reikšmę. Čia yra CSS reikšmė + yra \002B.

/* Akordeono stiliai */
.faq {
 spalva: #ffe3e3;
 paraštė-apačia: 3rem;
}
.faq-label {
 šrifto dydis: 1,5 rem;
 ekranas: lankstus;
 sulyginti elementus: centre;
 pateisinti-turinys: tarpas-tarp;
 kamšalas: 1em;
 fonas: #b61818;
 šrifto svoris: paryškintas;
 žymeklis: rodyklė;
 vartotojo pasirinkimas: nėra;
}
.faq-label:: po {
 turinys: '\002B';
 paminkštinimas: 0.51rem;
 transformuoti: skalė (1,8);
 teksto lygiavimas: centre;
 perėjimas: visi 0,35 s;
}
.faq-content {
 maksimalus aukštis: 0;
 paminkštinimas: 0 1em;
 spalva: #2c3e50;
 fonas: baltas;
 perėjimas: visi 0,35 s;
 ekranas: nėra;
}

Dabar pridėkime akordeono funkcijų gretimų ir atributų parinkikliai. Čia \2013 yra CSS reikšmė –, reiškianti skaitinė reikšmė –.

įvestis: pažymėta + .faq-label {
 fonas: #8f1414;
}
įvestis: pažymėta + .faq-label:: po {
 turinys: „\2013“;
 transformuoti: mastelis (1,5);
}
įvestis: patikrinta ~ .faq-content {
 maksimalus aukštis: 100vh;
 kamšalas: 1em;
 ekranas: blokas;
 perėjimas: visi 0,35 s;
}

Išvestis:

Radijo mygtuko metodo naudojimas

Radijo mygtuko metodo įvesties tipas nustatytas į radijas. Kaskart vartotojui spustelėjus skirtuką, atidaromas tą skirtuką atitinkantis paslėptas radijo mygtukas. Spustelėjus kitą skirtuką, ankstesnis skirtukas akimirksniu užsidaro. Vienu metu galite atidaryti tik vieną skirtuką naudodami radijo mygtuko metodą.

HTML

Tinkintas tik CSS akordeonas (DUK)

Naudojant radijo mygtuko metodą






Kaip sukurti akordeoną radijo mygtuko metodu?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Kaip sukurti pasirinktinį akordeoną naudojant tik CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Ką reiškia akordeono stilius?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Vel, ne!









Uždaryti viską ×

CSS

Nukopijuokite aukščiau pateiktą žymimojo laukelio metodo CSS, nes abu metodai skiriasi tik struktūriniu požiūriu. Galite pastebėti, kad visą laiką atidarytas vienas skirtukas. Taip nutinka todėl, kad negalite atžymėti radijo mygtukų, pvz., žymimųjų laukelių. Norėdami tai padaryti, pridėkite toliau pateiktą CSS kodą prie radijo mygtuko „Uždaryti viską“ be jokio aprašymo.

/* Uždaryti viską */
.faq-label {
 padėtis: santykinė;
}
.faq-close {
 ekranas: eilutinis blokas;
 paminkštinimas: 1 rem;
 šrifto dydis: 1 rem;
 fonas: #b61818;
 žymeklis: rodyklė;
 padėtis: absoliuti;
 kairėje: 64rem;
}

Išvestis:

Eksperimentuokite ir pridėkite animacijų

Akordeonuose slypi paprasta logika: spustelėjus meniu, pasirodys paslėptas jo turinys. Kadangi dabar žinote, kaip sukurti akordeoną, pats laikas įgyvendinti ir eksperimentuoti su savo mokymusi. Galite sukurti horizontalius akordeonus, kad pagerintumėte dizainą, ypač rodydami vaizdus. Eksperimentuokite su kodu koreguodami perėjimo efektą naudodami pagrindinio kadro animaciją.

Naincy Mourya (16 straipsnių paskelbta)

Naincy specializuojasi kuriant labai reaguojančias svetaines ir efektyvią turinio strategiją bei žiniatinklio kopijas. Ji yra laisvai samdoma technologijų rašytoja, kuri atidžiai stebi naujausias technologijas.

Daugiau iš Naincy Mourya