4 sposoby na stworzenie niesamowitych akordeonów tylko dla CSS
Akordeony treści stanowią użyteczny wzór projektu. Możesz ich używać do wielu różnych rzeczy: menu, list, obrazów, fragmentów artykułów, fragmentów tekstu, a nawet filmów
Większość akordeonów tam jest JavaScript, głównie na jQuery, ale ponieważ wykorzystanie zaawansowanych technik CSS3 stało się powszechne, możemy również znaleźć ładne przykłady używaj tylko HTML i CSS, które udostępniają je w środowiskach z wyłączonym JavaScriptem.
Tworzenie akordeonów zawierających tylko CSS może być trudnym zadaniem, więc w tym poście spróbujemy zrozumieć główne pojęcia, których programiści używają, gdy muszą je utworzyć.
Podczas tworzenia kart zawierających tylko CSS są zazwyczaj dwa główne podejścia, z których każde ma dwa częste przypadki użycia. Pierwsze podejście wykorzystuje ukryte elementy formularza, podczas gdy drugi korzysta Pseudo-selektory CSS.
1. Metoda przycisku radiowego
Metoda przycisku radiowego dodaje ukryte wejście radiowe i odpowiednią etykietę etykiety do każdej karty akordeonu. Logika jest prosta: gdy użytkownik wybierze kartę, w zasadzie sprawdza przycisk opcji, który należy do tej karty, w taki sam sposób, w jaki wypełniają formularz. Po kliknięciu następnej karty na akordeonie wybierają następny przycisk radiowy itp.
W tej metodzie, tylko jedna karta może być otwarta w tym samym czasie. Logika HTML wygląda mniej więcej tak:
Tytuł treści (nie używaj tutaj tagu h1)
Trochę treści…
p>
Musisz dodaj osobną parę etykiet radiowych dla każdej karty na akordeonie. Sam HTML nie da pożądanego zachowania, musisz także dodać odpowiednie reguły CSS, zobaczmy, jak możesz to osiągnąć.
Stałe pionowe karty wysokości
W tym rozwiązaniu (patrz zrzut ekranu poniżej) programista ukrył przycisk radiowy za pomocą Nie wyświetla się; reguła, a następnie dał pozycję względną znacznikowi etykiety, który zawiera tytuł każdej karty, i pozycję bezwzględną odpowiadającej etykieta: po pseudoelement.
Ten ostatni trzyma uchwyt oznaczony zielonym znakiem +, który otwiera zakładki. Zamknięte zakładki wykorzystują również uchwyt oznaczony kolorem zielonym “-” znaki. W CSS zamknięte zakładki są wybierane za pomocą selektora elementów element +.
Musisz także nadać zawartości otwartej karty stałą wysokość. Aby to zrobić, wybierz treść otwartej karty (oznaczonej klasą zawartości tabulacji w powyższym kodzie HTML) za pomocą selektora CSS element1 ~ element2.
Podstawowa logika CSS jest następująca:
input [type = radio] display: none; label position: relative; Blok wyświetlacza; label: after content: "+"; pozycja: absolutna; prawo: 1em; input: checked + label: after content: "-"; input: checked ~ .tab-content height: 150px;
Możesz przyjrzeć się pełnemu CSS na Codepen. CSS jest oryginalnie napisany w Sassie, ale jeśli klikniesz na “Zobacz skompilowane” przycisk, możesz zobaczyć skompilowany plik CSS.
Akordeon obrazu z przyciskami radiowymi
Ten piękny akordeon obrazowy wykorzystuje tę samą metodę przycisku radiowego, ale zamiast etykiet, programista tutaj użył znacznika HTML figcaption aby osiągnąć zachowanie akordeonu.
CSS jest nieco inny, głównie dlatego, że w tym przypadku zakładki nie są umieszczone pionowo, ale poziomo. Deweloper użył selektora CSS elementu + elementu (który był używany w poprzednim przypadku, aby wybrać przełączniki), aby zapewnić, że krawędzie pokrytych obrazów pozostaną widoczne.
Przeczytaj szczegółowy przewodnik dotyczący tworzenia tego eleganckiego akordeonu opartego wyłącznie na CSS.
2. Metoda wyboru
Metoda pola wyboru wykorzystuje typ wejścia pola wyboru zamiast przycisku opcji. Gdy użytkownik wybierze kartę, w zasadzie sprawdza odpowiednie pole wyboru.
Różnica w porównaniu z metodą przycisku radiowego polega na tym, że jest możliwe, aby otworzyć więcej niż jedną kartę w tym samym czasie, tak jak jest możliwe sprawdzenie więcej niż jednego pola wyboru wewnątrz formularza.
Z drugiej strony karty nie zamkną się same, gdy użytkownik kliknie inny. Logika HTML jest taka sama jak poprzednio, tylko w tym przypadku musisz użyć pola wyboru dla typu wejścia.
Tytuł treści (nie używaj tutaj tagu h1)
Trochę treści…
p>
Naprawiono akordeon w polu wyboru wysokości
Jeśli chcesz zakładki treści o stałej wysokości, logika CSS jest prawie taka sama jak w przypadku przycisku opcji, to tylko typ wejścia zmienił się z radia na pole wyboru. W tym piórze Codepen możesz spojrzeć na kod.
Fluid Height Checkbox Accordion
Gdy więcej niż jedna karta jest otwarta w tym samym czasie, wyświetlanie zakładek o stałej wysokości może negatywnie wpłynąć na wrażenia użytkownika, ponieważ wysokość akordeonu może znacznie wzrosnąć. Można to poprawić, jeśli zmienić stałą wysokość na wysokość płynu; oznacza to, że wysokość otwartych zakładek rozszerza się lub kurczy zgodnie z rozmiarem zawartej w nich zawartości.
Aby to zrobić, musisz zmodyfikuj stałą wysokość zawartości zakładki do maksymalnej wysokości, i wykorzystywać jednostki względne:
input: checked ~ .tab-content max-height: 50em;
Jeśli chcesz lepiej zrozumieć, jak działa ta metoda, możesz spojrzeć na ten Codepen.
3. Metoda: target
: target jest jednym z pseudo-selektorów CSS3. Z jego pomocą możesz połączyć element HTML z tagiem zakotwiczenia w następujący sposób:
Tytuł karty
Zawartość karty
Gdy użytkownik kliknie tytuł karty, cała sekcja otworzy się dzięki :cel pseudo-selektor, a URL zostanie również zmieniony na następujący format: www.some-url.com/#tab-1.
Otwarta karta może być stylizowana w CSS za pomocą sekcja: cel … reguła. Mamy świetny tutorial na hongkiat o tym, jak można tworzyć ładne akordeony tylko z CSS :cel metoda zarówno w układzie pionowym, jak i poziomym.
Główna wada :cel metoda jest taka zmienia adres URL, gdy użytkownik kliknie karty. Ma to wpływ na historię przeglądarki, a przycisk Wstecz przeglądarki nie przenosi użytkownika na poprzednią stronę, ale na poprzedni stan akordeonu.
4. Metoda: hover
Ta ostatnia wada może zostać przezwyciężona, jeśli wykorzystamy :wahać się Pseudo-selektor CSS zamiast :cel, ale w tym przypadku karty nie będą reagować na kliknięcie, ale na zdarzenie najechania. Sztuka polega na tym, że musisz albo ukryj nieodkryte elementy, lub zmniejszyć ich szerokość lub wysokość - w zależności od układu zakładek
Zawieszony element musi być widoczny lub ustawiony na pełną szerokość / wysokość, aby akordeon działał.
Wszystkie 3 akordeony przeznaczone tylko do CSS zostały wykonane przy użyciu metody: hover, kliknij linki poniżej zrzutów ekranu, aby zobaczyć kod.
Akordeon obrazu poziomego
Przekrzywiony akordeon
Akordeon aktywowany najechaniem ze stanem domyślnym
