Jak utworzyć akordeon treści oparty na CSS
W dzisiejszym samouczku dowiemy się, jak możemy stworzyć akordeon treści poziomej i pionowej, używając CSS3. Istnieje wiele wtyczek jQuery, które mogą wykonać tę pracę za ciebie, ale co robisz, jeśli gość ma wyłączony Javascript, to akordeon nie będzie działał poprawnie. Jeśli Twój akordeon jest wyłącznie w CSS, będzie działać dla wszystkich użytkowników.
Stworzymy poziomy i pionowy akordeon treści. Po kliknięciu tekstu nagłówka slajd otworzy się, wyświetlając pełną treść, a tutaj jest szybki podgląd (zrzuty ekranu), jak wyglądają.
Lubisz co widzisz? Niech zacznie się kodowanie!
1. Przygotowanie HTML i treści
Na początek stworzymy HTML dla akordeonu.
Struktura potrzebuje kontenera div a potem mieć Sekcja dla każdego slajdu na akordeonie. W tym przykładzie będziemy mieli 5 slajdów. Każdy ze slajdów będzie miał tytuł i akapit dla treści.
O nas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
Usługi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
Teczka
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
Kontakt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
Teraz mamy nasze slajdy, możemy zacząć stylować akordeon.
2. Stylizacja CSS
Najpierw musimy stylizować zawierające div akordeonu. To da nam wyobrażenie, jak wyświetlić każdy ze slajdów i nagłówków.
/ * Define Accordion box * / .accordion width: 830px; przepełnienie: ukryte; margin: 10px auto; kolor: # 474747; tło: # 414141; padding: 10px;
Następnie stworzymy nagłówki dla każdego ze slajdów.
.sekcja akordeonowa float: left; przepełnienie: ukryte; kolor: # 333; cursor: pointer; tło: # 333; margin: 3px; . sekcja akordowa: hover background: # 444;
Ustawiamy kolor tła na ciemnoszary w sekcji, aby był nagłówkiem, w którym użytkownicy klikną, aby wyświetlić slajd. Używamy tej sekcji zarówno dla nagłówka, jak i treści, co oznacza, że jesteśmy w stanie użyć mniej HTML i ponownie użyć tytułu slajdu jako nagłówka treści.
.sekcja akordeonowa p display: none;
W tej chwili wszystkie slajdy zostaną zamknięte, więc musimy upewnić się, że akapit jest ukryty, dopóki slajd nie zostanie otwarty, więc na razie ustaw wyświetlanie akapitu na żaden.
.sekcja akordeonowa: po pozycja: względna; rozmiar czcionki: 24px; kolor: # 000; waga czcionki: pogrubiona; . sekcja akordowa: nth-child (1): after content: '1'; . sekcja akordowa: nth-child (2): after content: '2'; . sekcja akordowa: nth-child (3): after content: '3'; . sekcja akordowa: nth-child (4): after content: '4'; . sekcja akordowa: nth-child (5): after content: '5';
Przy zamkniętych slajdach chcemy wyświetlić numer na dole nagłówka, aby powiedzieć, na którym slajdzie jesteśmy. W tym celu użyjemy CSS do dodania treści po nagłówku sekcji, można to zrobić za pomocą :po selektor pseudoklas.
Teraz utworzyliśmy nagłówek slajdu, który możemy wykonać jako kliknięcie, aby wyświetlić slajd na akordeonie. Ale jest problem, CSS nie ma zdarzenia click, dlatego akordeon jest zwykle tworzony za pomocą jQuery, więc możemy dołączyć zdarzenie click do tekstu nagłówka.
Musimy naśladować zdarzenie click w CSS, które można zrobić za pomocą :cel selektor pseudoklas.
3. Korzystanie :cel pseudo-klasa Selektor
:cel pozwala nam na stylizację identyfikatora fragmentu. Czasami używamy znacznika zakotwiczenia na stronie, aby wskazać miejsce na stronie. Po kliknięciu linku ID w tagu kotwicy staje się obiektem docelowym i możesz go stylizować za pomocą :cel selektor.
Aby dodać to do akordeonu, musimy dodać link do nagłówka wskazujący na ID slajdu.
O nas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Konsekwencją tego jest Nam vehicula elementum nulla sed. Phasellus eu erat enim. Wystąpienie w magna non massa dapibus scelerisque w ue.
.sekcja akordeonowa: target tło: #FFF; padding: 10px; .accordion section: target: hover background: #FFF; . sekcja akordowa: cel h2 szerokość: 100%; . sekcja akordowa: cel h2 a kolor: # 333; dopełnienie: 0; . sekcja akordowa: cel p display: blok; . sekcja akordowa h2 a dopełnienie: 8px 10px; Blok wyświetlacza; rozmiar czcionki: 16px; waga czcionki: normalna; kolor: #eee; dekoracja tekstowa: brak;
Powyższy kod zmieni rozmiar slajdu tak, aby pasował do reszty akordeonu i zmienia kolor tła na biały. Akapit został ukryty, więc teraz w celu musimy wyświetlić akapit.
Teraz, gdy klikniesz nagłówek akordeonu, slajd zmieni styl, aby wyświetlić zawartość slajdu.
4. Akordeon poziomy
Powyższy kod utworzy ogólny akordeon, teraz możemy zacząć wprowadzać zmiany w CSS dla różnic między poziomym i pionowym akordeonem. Oba te akordeony mają tę samą funkcjonalność, ale styl nagłówka byłby inny.
.przekrój poziomy szerokość: 5%; wysokość: 250px; -moz-transition: zwolnienie szerokości 0,2s; -webkit-transition: zwolnienie szerokości 0.2s; -o-przejście: łagodzenie szerokości 0,2s; przejście: łagodzenie szerokości 0,2s;
Najpierw ustawiamy szerokość sekcji nagłówka do 5%, więc jest to zamknięty slajd. Ponieważ sekcja jest zarówno nagłówkiem, jak i treścią slajdu, musimy dodać animację, aby wyświetlić zawartość przy użyciu właściwości przejścia.
/ * Ustaw numer slajdu * / .horizontal section: after top: 140px; left: 15px;
Pozycja numeru na slajdzie będzie taka sama jak pozycja w każdym zamkniętym nagłówku, które są ustawione inaczej niż pionowe nagłówki.
/ * Nagłówek zamkniętego slajdu * / .horizontal sekcja h2 -webkit-transform: rotate (90deg); -moz-transform: rotate (90deg); -o-transform: rotate (90deg); transform: rotate (90deg); szerokość: 240px; pozycja: względna; left: -100px; top: 85px; / * Na myszy nad otwartym slajdem * / .horizontal: target width: 73%; wysokość: 230px; .horizontal: target h2 top: 0px; po lewej: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: rotate (0deg); transform: rotate (0deg);
Powyższy kod zmieni rozmiar slajdu, aby pasował do reszty akordeonu. Nagłówek został obrócony w pionie, aby przejść w dół nagłówka, ale teraz po otwarciu slajdu musimy zmienić tekst z powrotem na poziomy, obracając tekst z powrotem do 0 stopni.
5. Akordeon pionowy
Pionowy akordeon działa w ten sam sposób, co akordeon poziomy, z wyjątkiem konieczności zmiany wysokość zamiast tego szerokość i nie musimy zmieniać wyrównania tekstu.
.przekrój pionowy szerokość: 100%; wysokość: 40px; -webkit-transition: zwolnienie wysokości 0.2s; -moz-transition: zwolnienie wysokości 0,2s; -o-przejście: łagodzenie wysokości 0,2s; przejście: łagodzenie wysokości 0,2s; / * Ustaw wysokość slajdu * / .vertical: target wysokość: 250px; szerokość: 97%;
Na cel wydarzenie pionowego akordeonu zamierzamy zmienić wysokość nagłówka, aby wyświetlić slajd.
.przekrój pionowy h2 pozycja: względna; po lewej: 0; top: -15px; / * Ustaw pozycję numeru na sekcji slajdów * / .vertical: after top: -60px; po lewej: 810px; .vertical section: target: after left: -9999px;
Powyższe spowoduje zmianę pozycja tekstu nagłówka na zamkniętym slajdzie. Z zamkniętym slajdem musimy ustawić pozycja numeru, który znajduje się po prawej stronie akordeonu. Gdy slajd jest otwarty, musimy ukryć ten numer na nagłówku, gdy cel jest ustawiony, więc zmieniamy lewą pozycję poza ekran.
Teraz, gdy klikniesz nagłówek akordeonu, slajd zmieni styl, aby wyświetlić zawartość slajdu.
Nota redaktora: Ten wpis jest napisany przez Paul Underwood dla Hongkiat.com. Paul jest programistą PHP Web z Bristolu w Wielkiej Brytanii. Pisze samouczki na temat Web Development: główne tematy to PHP, jQuery, CSS3 i HTML5. Nagrywa także przydatne fragmenty kodu w Paulund.co.uk.
