A CSS harmonikákat széles körben használják kibontható és összecsukható menük, kivonatok, képek, videók, GYIK, listák és cikkrészletek készítéséhez. Könnyedén létrehozhatja őket HTML, CSS és JavaScript (vagy jQuery) használatával. A csak CSS-t használó harmonikák létrehozása egy kicsit kihívást jelentő feladat, de rendkívül hasznos JavaScript letiltott környezetekben.

Ebben az útmutatóban lépésről lépésre megismerheti a csak CSS-t használó harmonika létrehozását.

Alapszintű harmonika készítése csak HTML használatával

Ha prioritása egy akadálymentes harmonika létrehozása HTML használatával, a és címkék a megfelelő út. Nem számít, melyik programozási nyelvet használja, a csak HTML-t tartalmazó harmonika érintetlen marad. Hozzon létre egy jelölje meg szülőként, és írja be a kérdést a címke. Írjon leíró választ a belül címke. Ismételje meg a folyamatot tetszőleges számú GYIK-hez.

GYIK 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







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






GYIK 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 és eligendi hic reprehenderit repellendus quos!

A harmonika stílusa

A harmonika stílusát a beállításával módosíthatja háttérszín, határ-sugár, árrés, párnázásstb.

body {
 font-család: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Genf, Verdana, sans-serif;
 maximális szélesség: 30 rem;
 margó: 1,5 rem auto;
}
összefoglaló {
 betűsúly: 600;
 szín: rgb (255, 255, 255);
 háttérszín: rgb (7, 185, 255);
 párnázás: 1,2 rem;
 margó-alsó: 1,2rem;
 határsugár: 0,5 rem;
 kurzor: pointer;
}

Kimenet:

Az egyetlen korlátozás az, hogy nem tudja ellenőrizni a kód minden egyes részét. A HTML-struktúra módosítható, de egyéni harmonikát nem lehet létrehozni. Ezért készítsünk egy egyéni GYIK részt a fejlett CSS használatával.

Készítse el egyéni GYIK rovatát

Két népszerű módszer létezik egyéni, csak CSS-t használó harmonika létrehozására. Használhat jelölőnégyzeteket vagy rádiógombokat; mindkét módszert elmagyarázzuk.

A jelölőnégyzet módszer használata

A jelölőnégyzet módszert használja jelölőnégyzetet bemeneti típusként. Amikor a felhasználó kiválaszt egy lapot, bejelöli a jelölőnégyzetet, és az megnyílik. Egyszerre több lapot is megnyithat a jelölőnégyzet módszerrel, hasonlóan ahhoz, ahogyan egynél több jelölőnégyzetet jelölhet meg HTML űrlap.

HTML

Egyedi CSS harmonika (GYIK)

A Checkbox módszer használata






Hogyan készítsünk egyedi harmonikát csak CSS használatával?


 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.









Hogyan lehet megváltoztatni az álelemek magasságát?


 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 in! Eveniet.

Általános CSS

Alkalmazza az alapvető CSS-t a testre.

body {
 szín: #502c2c;
 háttér: #f1edec;
 párnázás: 1,2 rem;
 font-család: 'Segoe UI', Tahoma, Genf, Verdana, sans-serif;
 maximális szélesség: 45 rem;
 margó: 0 auto;
 betűméret: 1,2 rem;
}

A harmonika stílusa

Először is rejtse el a jelölőnégyzeteket a bemenet módosításával.

/* A jelölőnégyzetek vagy a rádiógomb elrejtése*/
input {
 pozíció: abszolút;
 átlátszatlanság: 0;
 z-index: -1;
}

Most alakítsd ki a harmonikát. Hozzáadhat egy::után pszeudo-elem a + jel. Hivatkozhat a Karakter entitás referenciadiagram és bármilyen Entitáskonverziós kalkulátor hogy megtalálja egy numerikus érték CSS-értékét. Itt a CSS értéke + van \002B.

/* Harmonika stílusok */
.GYIK {
 szín: #ffe3e3;
 margó-alsó: 3rem;
}
.faq-label {
 betűméret: 1,5 rem;
 kijelző: flex;
 align-ites: center;
 indokol-tartalom: szóköz-között;
 párnázás: 1em;
 háttér: #b61818;
 betűsúly: félkövér;
 kurzor: pointer;
 user-select: nincs;
}
.faq-label:: after {
 tartalom: '\002B';
 párnázás: 0,51 rem;
 transzformáció: skála (1,8);
 szöveg igazítása: középre;
 átmenet: mind 0,35s;
}
.faq-content {
 max-magasság: 0;
 padding: 0 1em;
 szín: #2c3e50;
 háttér: fehér;
 átmenet: mind 0,35s;
 kijelző: nincs;
}

Most pedig adjunk funkcionalitást a harmonikához szomszédos és attribútumválasztók. Itt, \2013 a CSS-érték ehhez –, a numerikus értéket képviselő –.

input: checked + .faq-label {
 háttér: #8f1414;
}
input: checked + .faq-label:: after {
 tartalom: '\2013';
 transzformáció: skála (1,5);
}
bemenet: bejelölve ~ .faq-content {
 max-magasság: 100vh;
 párnázás: 1em;
 kijelző: blokk;
 átmenet: mind 0,35s;
}

Kimenet:

A rádiógombos módszer használata

A Radio Button Method bemeneti típusa a következőre van állítva rádió. Amikor a felhasználó rákattint egy lapra, megnyílik az adott lapnak megfelelő rejtett rádiógomb. Ha a következő lapra kattint, az előző lap azonnal bezárul. A Rádiógombos módszerrel egyszerre csak egy lapot nyithat meg.

HTML

Egyedi CSS harmonika (GYIK)

A Rádiógomb módszer használatával






Hogyan készítsünk harmonikát rádiógombos módszerrel?


 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.









Hogyan készítsünk egyedi harmonikát csak CSS használatával?


 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.









Mit jelent a harmonika stílus?


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









Az összes bezárása ×

CSS

Másolja ki a Checkbox Method fenti CSS-jét, mivel mindkét módszer csak szerkezeti szempontból tér el. Észreveheti, hogy mindig egy lap van nyitva. Ez azért történik, mert nem lehet eltávolítani a rádiógombok, például a jelölőnégyzetek jelölését. Ennek eléréséhez adja hozzá az alábbi CSS-kódot az "Összes bezárása" választógombhoz leírás nélkül.

/* Az összes bezárása */
.faq-label {
 pozíció: relatív;
}
.faq-close {
 kijelző: inline-block;
 párnázás: 1 rem;
 betűméret: 1 rem;
 háttér: #b61818;
 kurzor: pointer;
 pozíció: abszolút;
 bal: 64rem;
}

Kimenet:

Folytassa a kísérletezést és adjon hozzá animációkat

A harmonika mögött egyszerű logika van: ha rákattint egy menüre, megjelenik annak rejtett tartalma. Mivel most már tudja, hogyan kell harmonikát készíteni, itt az ideje, hogy megvalósítsa és kísérletezzen a tanulással. Vízszintes harmonikákat építhet a dizájn javítása érdekében, különösen képek megjelenítésekor. Kísérletezzen a kóddal az átmeneti effektus kulcskép-animációk segítségével történő beállításával.

Naincy Mourya (16 cikk megjelent)

A Naincy rendkívül reszponzív webhelyek és hatékony tartalomstratégia, valamint webes másolatok készítésére specializálódott. Ő egy szabadúszó technológiai író, aki élesen figyeli a felkapott technológiákat.

Továbbiak Naincy Mouryától