4 spôsoby vytvárania úžasných akordov CSS

Obsahové akordeóny tvoria užitočný dizajnový vzor. Môžete ich použiť pre mnoho rôznych vecí: pre ponuky, zoznamy, obrázky, výňatky z článku, úryvky textu a dokonca aj videá

Väčšina akordeónov sa tam spolieha JavaScript, hlavne na jQuery, ale keďže sa rozšírené používanie pokročilých techník CSS3, môžeme nájsť aj pekné príklady toho používať iba HTML a CSS, ktoré ich sprístupňujú v prostredí s zakázaným javascriptom.

Vytváranie harmonikov iba v CSS môže byť zložitá úloha, takže sa v tomto príspevku pokúsime pochopiť hlavné koncepty, ktoré používatelia používajú, keď potrebujú vytvoriť.

Pri vytváraní záložiek CSS existujú zvyčajne dva hlavné prístupy, z ktorých každý má dva prípady častého použitia. Používa sa prvý prístup skryté prvky formulára, zatiaľ čo druhý využíva Pseudo-selektory CSS.

1. Metóda rádiového tlačidla

Metóda Rádiové tlačidlo pridá k každej karte akordeónu skrytý rádiový vstup a zodpovedajúci štítok štítku. Logika je jednoduchá: keď používateľ vyberie kartu, v podstate skontroluje prepínač, ktorý patrí k tejto karte, rovnako ako pri vyplňovaní formulára. Keď kliknú na ďalšiu kartu v akordeóne, vyberú ďalší prepínač, atď.

V tejto metóde, môže byť otvorená iba jedna karta v rovnakom čase. Logika HTML vyzerá takto:

 
  
  Názov karty 1 
 
Názov obsahu (nepoužívajte značku h1 tu)
 
Niektorý obsah ... 
p> 
 
  
 

Musíte pridajte samostatnú dvojicu rádiových štítkov pre každú kartu v akordeóne. Samotný kód HTML neposkytne požadované správanie, musíte pridať aj príslušné pravidlá CSS, uvidíme, ako to dosiahnuť.

Vertikálne záložky s pevnou výškou

V tomto riešení (pozri obrázok nižšie) vývojár schoval prepínač pomocou tlačidla zobrazenie: žiadne; pravidlo potom dal relatívnu pozíciu k značke štítku, ktorá obsahuje názov každej karty a absolútnu pozíciu k zodpovedajúcej Štítok: po pseudo-prvok.

Posledný z nich má rukoväť označenú zelenou značkou +, ktorá otvára karty. Uzavreté karty používajú aj rukoväť označenú zelenou farbou “-” príznaky. V CSS sa vyberú zatvorené karty pomocou voliča element + element.

Takisto musíte dať obsah otvorenej záložky pevnej výšky. Ak to chcete urobiť, vyberte body otvorenej záložky (označené triedou obsahu tabu v hore uvedenom HTML) pomocou voliča CSS element1 ~ element2.

Základnou logikou CSS je nasledovné:

 vstup [typ = rádio] zobrazenie: žiadne;  štítok pozícia: relatívna; zobrazenie: blok; : po content: "+"; poloha: absolútna; doprava: 1m;  vstup: začiarknuté + štítok: po content: "-";  vstup: začiarknuté ~ .tab-content height: 150px;  

Môžete sa pozrieť na celý CSS tu na Codepen. CSS je pôvodne napísané v Sass, ale ak kliknete na “Zobraziť kompilované” , môžete vidieť kompilovaný súbor CSS.

Image Accordion s rádiovými tlačidlami

Tento krásny obrázok akordeón používa rovnakú metódu prepínača, ale namiesto štítkov, vývojár tu používala značku fiktívne HTML na dosiahnutie akordeónového správania.

CSS je trochu iný, hlavne preto, že v tomto prípade nie sú záložky umiestnené vertikálne, ale horizontálne. Vývojár použil prvok + prvok CSS selektor (ktorý bol použitý v predchádzajúcom prípade na výber prepínačov), aby sa zaistilo, že okraje pokrytých obrázkov zostanú viditeľné.

Prečítajte si podrobnú príručku o tom, ako vytvoriť tento elegantný akordion CSS.

2. Metóda Checkbox

Metóda začiarkavacieho políčka používa namiesto prepínača typ zadávania zaškrtávacieho políčka. Keď používateľ vyberie kartu, v podstate skontroluje príslušné začiarkavacie políčko.

Rozdiel v porovnaní s metódou prepínača je, že je to možno otvoriť viac ako jednu kartu súčasne, rovnako ako je možné skontrolovať viac ako jednu zaškrtávacie políčka vo formulári.

Na druhej strane karty sa samy nezatvoria, keď používateľ klikne na iný. Logika HTML je rovnaká ako predtým, práve v tomto prípade musíte použiť začiarkavacie políčko pre typ vstupu.

 
  
  Názov karty 1 
 
Názov obsahu (nepoužívajte značku h1 tu)
 
Niektorý obsah ... 
p> 
 
  
 

Pevná schránka akordy

Ak chcete záložky s pevnou výškou obsahu, logika CSS je skoro rovnaká ako v prípade prepínača, je to len typ vstupu, ktorý sa zmenil z rádia na začiarkavacie políčko. V tomto perom Codepen sa môžete pozrieť na kód.

Akord

Ak sú súčasne otvorené viac kariet, zobrazenie záložiek s pevnou výškou môže negatívne ovplyvniť používateľskú skúsenosť, pretože výška akordeónu môže výrazne rásť. To môže byť vylepšené, ak vy zmeniť pevnú výšku na výšku kvapaliny; to znamená, že výška otvorených chlopní sa rozširuje alebo zmenšuje v závislosti od veľkosti obsahu, ktorý drží.

Ak to chcete urobiť, musíte to urobiť upravte pevnú výšku obsahu záložiek na maximálnu výšku, a používať relatívne jednotky:

 vstup: začiarknuté ~ .tab-content max-height: 50em;  

Ak chcete lepšie pochopiť, ako táto metóda funguje, môžete sa pozrieť na tento Codepen.

3. Cieľová metóda

: cieľ je jeden z pseudo-selektorov CSS3. S jeho pomocou môžete prepojiť prvok HTML s kotevnou značkou nasledujúcim spôsobom:

 
 
Názov tabuľky
 
Obsah karty
 
 

Keď používateľ klikne na názov karty, celá sekcia sa otvorí vďaka priečinku : cieľová pseudo-selector a URL sa tiež zmení na nasledujúci formát: www.some-url.com/#tab-1.

Otvorená záložka môže byť v CSS navrhnutá pomocou sekcia: cieľ ... vládnuť. Máme skvelý návod tu na hongkiat o tom, ako môžete vytvoriť pekné CSS-akordeóny len s : cieľová vo vertikálnom i horizontálnom usporiadaní.

Hlavný nedostatok : cieľová metóda je to zmení adresu URL, keď používateľ klikne na karty. To ovplyvňuje históriu prehliadača a tlačidlo spätného chodu prehliadača neprijme užívateľa na predchádzajúcu stránku, ale na predchádzajúci stav akordeónu.

4. Metóda vznášania

Tento nedostatok možno prekonať, ak využijeme :vznášať sa Pseudo-selektor CSS namiesto : cieľová, ale v tomto prípade karty nereagujú na kliknutie, ale na udalosť vznášania. Trik tu je, že potrebujete buď skryť nezúčastnené prvky, alebo znížiť ich šírku alebo výšku - v závislosti od rozloženia kariet

Povrchový prvok musí byť viditeľný alebo nastavený na celú šírku / výšku, aby sa dalo urobiť akordeón.

Nasledujúce 3 akordy iba pre CSS boli vytvorené metódou: hover, kliknutím na odkazy pod snímkami obrazovky sa môžete pozrieť na kód.

Horizontálna obrazová akordeón

Skosená akordeón

Hover-Aktivovaná akordia so štandardným stavom