CSS-i akordione kasutatakse laialdaselt laiendatavate ja kokkupandavate menüüde, katkendite, piltide, videote, KKK-de, loendite ja artiklite väljavõtete jaoks. Saate neid hõlpsalt luua HTML-i, CSS-i ja JavaScripti (või jQuery) abil. Ainult CSS-i akordionide loomine on pisut keeruline ülesanne, kuid JavaScripti keelatud keskkondades on see väga kasulik.

Sellest juhendist saate teada, kuidas luua ainult CSS-i akordioni samm-sammult.

Põhilise akordioni loomine ainult HTML-i abil

Kui teie prioriteet on juurdepääsetava akordioni loomine HTML-i abil, ja sildid on õige tee. Pole tähtis, millist programmeerimiskeelt kasutate, ainult HTML-iga akordion jääb puutumata. Loo märkige vanemaks ja sisestage küsimus a-sse silt. Kirjutage a sisse kirjeldav vastus silt. Korrake protsessi suvalise arvu KKK jaoks.

KKK 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



KKK 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. 






KKK 3



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

Akordioni stiil

Saate akordioni stiilida reguleerides taustavärv, piiriraadius, marginaal, polsterdus, jne.

keha {
 fondiperekond: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genf, Verdana, sans-serif;
 maksimaalne laius: 30 rem;
 veeris: 1,5rem auto;
}
kokkuvõte {
 fondi kaal: 600;
 värv: rgb (255, 255, 255);
 taustavärv: rgb (7, 185, 255);
 polster: 1,2rem;
 veeris-alumine: 1,2rem;
 piiri raadius: 0,5rem;
 kursor: kursor;
}

Väljund:

Ainus piirang on see, et teil ei ole kontrolli iga koodi osa üle. HTML-i struktuuri saab muuta, kuid te ei saa luua kohandatud akordioni. Seetõttu loome täiustatud CSS-i abil kohandatud KKK jaotise.

Looge oma kohandatud KKK jaotis

Ainult CSS-i kohandatud akordioni loomiseks on kaks populaarset meetodit. Võite kasutada märkeruutusid või raadionuppe; selgitame mõlemat meetodit.

Märkeruudu meetodi kasutamine

Märkeruudu meetod kasutab märkeruut sisendi tüübina. Kui kasutaja valib vahekaardi, märgib ta selle märkeruudu ja see avaneb. Saate avada mitu vahekaarti korraga, kasutades märkeruudu meetodit, sarnaselt sellele, kuidas saate märkida mitu märkeruutu HTML vorm.

HTML

Ainult kohandatud CSS-akordion (KKK)

Märkeruudu meetodi kasutamine






Kuidas luua kohandatud akordioni, kasutades ainult CSS-i?


 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.









Kuidas muuta pseudoelementide kõrgust?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus kivételuri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 rerehenderit facere ex hic ipsa odit sisse! Eveniet.

Üldine CSS

Rakendage kehale põhilist CSS-i.

keha {
 värv: #502c2c;
 taust: #f1edec;
 polster: 1,2rem;
 fondiperekond: 'Segoe UI', Tahoma, Genf, Verdana, sans-serif;
 maksimaalne laius: 45 rem;
 marginaal: 0 auto;
 fondi suurus: 1,2rem;
}

Akordioni stiil

Esmalt peitke märkeruudud, muutes sisendit.

/* Märkeruutude või raadionupu peitmine*/
sisend {
 positsioon: absoluutne;
 läbipaistmatus: 0;
 z-indeks: -1;
}

Nüüd kujundage akordioni stiili. Saate lisada:: pärast pseudoelement jaoks + märk. Võite viidata a Tähemärgi olemi viitetabel ja kasutage mis tahes Olemite teisendamise kalkulaator numbrilise väärtuse CSS-väärtuse leidmiseks. Siin on CSS-i väärtus + on \002B.

/* Akordioni stiilid */
.faq {
 värv: #ffe3e3;
 veeris-alumine: 3rem;
}
.faq-label {
 fondi suurus: 1,5 rem;
 ekraan: flex;
 joonda-elemendid: keskel;
 õigusta-sisu: tühik-vahel;
 polster: 1em;
 taust: #b61818;
 fondi kaal: paks;
 kursor: kursor;
 kasutaja valik: puudub;
}
.faq-label:: pärast {
 sisu: '\002B';
 polsterdus: 0,51rem;
 teisendus: skaala (1,8);
 teksti joondamine: keskel;
 üleminek: kõik 0,35s;
}
.faq-content {
 maksimaalne kõrgus: 0;
 polsterdus: 0 1em;
 värv: #2c3e50;
 taust: valge;
 üleminek: kõik 0,35s;
 kuva: puudub;
}

Nüüd lisame akordionile funktsionaalsust kasutades külgnevad ja atribuutide valijad. siin, \2013 on CSS-i väärtus –, tähistab numbrilist väärtust –.

sisend: märgitud + .faq-label {
 taust: #8f1414;
}
sisend: märgitud + .faq-label:: pärast {
 sisu: '\2013';
 teisendus: skaala (1,5);
}
sisend: kontrollitud ~ .faq-content {
 maksimaalne kõrgus: 100vh;
 polster: 1em;
 kuva: plokk;
 üleminek: kõik 0,35s;
}

Väljund:

Raadionupu meetodi kasutamine

Raadionupu meetodi sisendi tüüp on seatud väärtusele raadio. Kui kasutaja klõpsab vahekaardil, avaneb sellele vahekaardile vastav peidetud raadionupp. Kui klõpsate järgmisel vahekaardil, sulgub eelmine vahekaart koheselt. Raadionupu meetodi abil saate korraga avada ainult ühe vahelehe.

HTML

Ainult kohandatud CSS-akordion (KKK)

Kasutades raadionupu meetodit






Kuidas raadionupu meetodil akordioni luua?


 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.









Kuidas luua kohandatud akordioni, kasutades ainult CSS-i?


 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.









Mida tähendab akordionistiil?


 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, ei!









Sule kõik ×

CSS

Kopeerige ülaltoodud märkeruudu meetodi CSS, kuna mõlemad meetodid erinevad ainult struktuurilisest vaatepunktist. Võite märgata, et üks vaheleht on kogu aeg avatud. See juhtub seetõttu, et te ei saa raadionuppude (nt märkeruutude) märke tühistada. Selle saavutamiseks lisage allolev CSS-kood raadionupule "Sule kõik" ilma kirjelduseta.

/* Sule kõik */
.faq-label {
 asend: suhteline;
}
.faq-close {
 ekraan: inline-block;
 polster: 1rem;
 fondi suurus: 1rem;
 taust: #b61818;
 kursor: kursor;
 positsioon: absoluutne;
 vasakul: 64rem;
}

Väljund:

Jätkake katsetamist ja lisage animatsioone

Akordionide taga on lihtne loogika: kui klõpsate menüül, ilmub selle peidetud sisu. Kuna teate nüüd, kuidas akordioni luua, on viimane aeg oma õppimist rakendada ja katsetada. Disaini täiustamiseks, eriti piltide kuvamisel, saate ehitada horisontaalsed akordionid. Katsetage koodiga, kohandades üleminekuefekti võtmekaadri animatsioonide abil.

Naincy Mourya (16 avaldatud artiklit)

Naincy on spetsialiseerunud väga tundlike veebisaitide ja tõhusa sisustrateegia koostamisele koos veebikoopiatega. Ta on vabakutseline tehnikakirjanik, kes hoiab trendikatel tehnoloogiatel teravat silma peal.

Veel Naincy Mouryalt