4 způsoby, jak vytvořit úžasné CSS-jen akordeony
Obsahové harmoniky tvoří užitečný vzor. Můžete je použít pro mnoho různých věcí: pro nabídky, seznamy, obrázky, úryvky z článku, úryvky textu a dokonce videa
Na většinu akordeonů se spoléhá JavaScript, hlavně na jQuery, ale protože použití pokročilých CSS3 technik se stalo rozšířeným, můžeme také najít pěkné příklady používat pouze HTML a CSS, které je zpřístupňují v prostředích s vypnutým JavaScriptem.
Vytvoření harmonických pouze pro CSS může být složitým úkolem, takže se v tomto příspěvku budeme snažit pochopit hlavní koncepty, které vývojáři používají, když je potřebují vytvořit.
Při vytváření záložek CSS jsou obvykle dva hlavní přístupy, z nichž každý má dva případy častého použití. První přístup využívá skryté prvky formuláře, zatímco druhá využívá CSS pseudo-selektory.
1. Metoda rádiového tlačítka
Metoda rádiového tlačítka přidává skrytý rádiový vstup a odpovídající značku štítku ke každé záložce harmoniky. Logika je jednoduchá: když uživatel vybere kartu, v podstatě zkontroluje přepínač, který patří k této kartě, stejně jako když vyplní formulář. Když kliknou na další záložku v akordeonu, vyberou další přepínač atd.
V této metodě, může být otevřena pouze jedna karta ve stejnou dobu. Logika HTML vypadá takto:
Název obsahu (zde nepoužívejte značku h1)
Nějaký obsah…
p>
Musíš pro každou kartu přidejte samostatný pár rádiových štítků v harmonice. Samotný kód HTML neposkytne požadované chování, je třeba přidat i příslušná pravidla CSS. Podívejme se, jak toho dosáhnout.
Vertikální karty s pevnou výškou
V tomto řešení (viz níže uvedený obrázek) vývojář skryl přepínač pomocí tlačítka displej: žádný; pravidlo, pak dal relativní pozici štítku štítku, který drží titul každé karty, a absolutní pozici odpovídající štítek: po pseudo-element.
Ten drží držadlo označené zeleným znakem +, který otevírá karty. Uzavřené úchytky také používají rukojeť označenou zelenou barvou “-” značky. V CSS jsou uzavřené záložky vybrány pomocí prvku + elementu.
Musíte také dát obsah otevřené karty pevnou výšku. To provedete tak, že pomocí voliče element1 ~ element2 CSS vyberete tělo otevřené záložky (označené třídou obsahu obsahu v HTML výše).
Základní logikou CSS je následující:
input [type = radio] zobrazit: žádné; štítek pozice: relativní; zobrazení: blok; label: after content: "+"; pozice: absolutní; vpravo: 1em; input: checked + label: after content: "-"; input: checked ~ .tab-content výška: 150px;
Můžete se podívat na celý CSS zde na Codepen. CSS je původně napsán v Sassu, ale pokud kliknete na “Zobrazit kompilován” můžete vidět kompilovaný soubor CSS.
Obrázek Akordeon s rádiovými tlačítky
Tento krásný obraz akordeon používá stejnou metodu rádiového tlačítka, ale místo štítků, zde vývojář použil tag HTML tagcaption dosáhnout chování akordeonu.
CSS je poněkud odlišná, hlavně proto, že v tomto případě nejsou karty umístěny svisle, ale vodorovně. Vývojář použil volič element + element CSS (který byl použit v předchozím případě k výběru přepínačů), aby bylo zajištěno, že hrany krytých obrazů zůstanou viditelné..
Přečtěte si podrobný návod, jak vytvořit tento elegantní akordeon CSS.
2. Metoda Checkbox
Metoda zaškrtávacího políčka používá namísto přepínače políčko typu vstupu. Když uživatel vybere kartu, zkontroluje v podstatě odpovídající políčko.
Rozdíl oproti metodě přepínačů spočívá v tom, že je to lze současně otevřít více než jednu kartu, stejně jako je možné zkontrolovat více než jedno zaškrtávací políčko uvnitř formuláře.
Na druhé straně se karty samy o sobě neuzavře, když uživatel klikne na jinou kartu. Logika HTML je stejná jako dříve, jen v tomto případě je třeba použít vstupní pole.
Název obsahu (zde nepoužívejte značku h1)
Nějaký obsah…
p>
Checkbox Accordion (Pevná výška zaškrtávacího políčka)
Pokud chcete, aby karty s pevnou výškou obsahovaly, logika CSS je téměř stejná jako v případě přepínače, je to jen typ vstupu změněný z rádia na zaškrtávací políčko. V tomto Kodepenovém peru se můžete podívat na kód.
Zaškrtávací políčko Fluid Height
Když je současně otevřeno více než jeden jazýček, zobrazení karet s pevnou výškou může negativně ovlivnit uživatelský komfort, protože výška harmoniky může výrazně růst. To lze zlepšit, pokud vy změňte pevnou výšku na výšku kapaliny; to znamená, že výška otevřených karet se zvětšuje nebo zmenšuje podle velikosti obsahu, který drží.
K tomu musíte upravte pevnou výšku obsahu karty na max. výšku, a využívají relativní jednotky:
input: checked ~ .tab-content max-height: 50em;
Pokud chcete lépe pochopit, jak tato metoda funguje, můžete se podívat na tento Kodex.
3. Metoda: cíl
cíl je jeden z pseudo-selektorů CSS3. S jeho pomocí můžete element HTML propojit s kotevní značkou následujícím způsobem:
Název Tab
Obsah Tab
Když uživatel klikne na název karty, celá sekce se otevře díky :cílová pseudo-selektor a adresa URL bude také změněna na následující formát: www.some-url.com/#tab-1.
Otevřenou záložku lze stylizovat v CSS pomocí sekce: cíl … pravidlo. Máme skvělý návod zde na hongkiat o tom, jak si můžete vytvořit pěkné harmonické CSS-only s :cílová ve vertikálním i horizontálním uspořádání.
Hlavní nedostatek :cílová metodou když uživatel klikne na karty, změní adresu URL. To ovlivňuje historii prohlížeče a tlačítko zpětného prohlížeče uživatele nepřijme na předchozí stránku, ale na předchozí stav akordeonu.
4. Metoda: hover
Tento druhý nedostatek lze překonat, pokud využijeme :vznášet se CSS pseudo-selektor místo :cílová, ale v tomto případě karty nebudou reagovat na kliknutí, ale na událost přechodu. Trik je, že musíte buď skryj neposkvrněné prvky, nebo snížit jejich šířku nebo výšku - v závislosti na rozložení karet
Vznášející se prvek musí být viditelný, nebo nastaven na plnou šířku / výšku, aby fungoval harmonik.
Následující tři harmonie pouze pro CSS byly provedeny metodou: hover, kliknutím na odkazy pod snímky obrazovky se můžete podívat na kód.
Horizontální obrázek akordeon
Šikmý akordeon
Hover-aktivovaný akordeon s výchozím stavem
