A MODULRÓL
Interakció JavaScript nélkül – hogyan?
Egy rejtett jelölőnégyzet vagy rádiógomb állapotot tárol, a hozzá tartozó <label for="…"> pedig kattintható „gombként” kapcsolja. A CSS a :checked pszeudo-osztállyal és a testvérszelektorokkal (+, ~) reagál: ha a jelölő be van kapcsolva, a mögötte álló panel látszik. A :target az URL #azonosító részére, a :hover és a :focus-within a rámutatásra és a fókuszra reagál.
/* ha a jelölő be van kapcsolva, a következő testvérek közül a .panel látszik */
.kapcsolo-input:checked ~ .panel { display: block; }A rejtett vezérlőt ne display: none-nal rejtsd el (a régi változat így tett): akkor billentyűzettel nem érhető el, és a képernyőolvasó sem tud róla. Helyette tedd láthatatlanná (opacity: 0, 1 × 1 px), és a fókuszát jelezd a címkén. A Bootstrap kész komponensei (dropdown, accordion, tabs, modal) JavaScripttel ennél is hozzáférhetőbbek – a CSS-only megoldás tanulásra és egyszerű esetekre jó.
1. FEJEZET
Lenyíló menük
Egy jelölőnégyzet nyitja-csukja a menüt (:checked ~ .dropdown-tartalom). A többszintű menüben minden szinthez saját jelölő tartozik; a mega menü egy több oszlopos panel. Próbáld billentyűzettel is: Tab a menügombra, Szóköz nyitja.
2. FEJEZET
Harmonika (accordion)
Rádiógombokkal: egy csoportban (name) mindig csak egy lehet bejelölve, ezért mindig pontosan egy panel van nyitva. (Ha olyan harmonikát szeretnél, amelyben mindegyik külön nyitható, jelölőnégyzetet használj; a Bootstrap saját accordion komponense pedig JavaScripttel mindkettőt tudja.) Billentyűzettel: Tab a csoportra, a nyilakkal váltasz.
3. FEJEZET
Lapfülek (tabs)
Szintén rádiógombok: a fülek a címkék, a panelek közül a :checked sorszámának megfelelő látszik (.tab-input:nth-of-type(2):checked ~ .tab-tartalom .tab-panel:nth-of-type(2)).
4. FEJEZET
Elemleírás (tooltip)
Az elemleírás szövege egy data-tooltip attribútumban van, a CSS az attr() függvénnyel írja ki egy ::after pszeudo-elembe. Rámutatásra és fókuszra jelenik meg (a gomboknál Tab-bal is). Fontos információ ne csak elemleírásban legyen: érintőképernyőn nehéz előhozni.
5. FEJEZET
Lightbox a :target pszeudo-osztállyal
A kis kép egy link (href="#lightbox1"); kattintásra az URL végére #lightbox1 kerül, és a CSS a :target-tel megjeleníti az azonos azonosítójú, teljes képernyős réteget. A bezáró link (href="#") üríti az azonosítót, ettől a réteg eltűnik.
GYAKORLÁS
Gyakorló feladatok
- Készíts kétszintű lenyíló menüt jelölőnégyzetekkel, és ellenőrizd: használható-e csak billentyűzettel?
- Készíts „GYIK” harmonikát jelölőnégyzetekkel, hogy egyszerre több válasz is nyitva lehessen.
- Készíts háromfüles termékleírást (Leírás – Méretek – Vélemények).
- Építs lightbox-galériát „előző” és „következő” nyíllal (a nyilak a szomszédos
#kep2,#kep3azonosítóra mutatnak).
A :target az URL-t is megváltoztatja, ezért a böngésző Vissza gombja a lightbox bezárását „lépi vissza” – ez néha előny, néha meglepő. Az állapotot tároló jelölőnégyzetek mindig tartozzanak <label>-hez, és a címke szövege mondja meg, mit nyit.