przykładowe akordeony
Z akordeonem możemy spotkać się na różnych stronach internetowych. Najczęściej w dziale FAQ – gdzie z jego pomocą możemy rozwinąć odpowiedz na nasze pytanie.
Akordeon działa więc podobnie jak instrument noszący jego nazwę (rozwija się i zwija). To oczywiście najbardziej charakterystyczny przykład tego elementu, ale nie jedyny. Akordeony świetnie sprawdzają się także w innych miejscach gdzie np. mamy mało miejsca.
Postaram się dzisiaj pokazać kilka przykładowych akordeonów jakie można znaleźć w internecie.
Autor: Alex Bergin
Akordeon wykonany jedynie w CSS i HTML bez użycia skryptów jQuery czy Javascript
Autor: Jon Yablonski
Rozwijany akordeon, w którym tylko jedno pole może być aktualnie otwarte.
Autor: vavik
Akordeon działający po najechaniu kursorem myszki.
Autor: Gerald De Leon
Ciekawy ukryty akordeon dostępny dopiero po najechaniu kursorem myszki na element.
See the Pen Skewed CSS Accordion by Gerald De Leon (@gdeleon101) on CodePen.
Autor: Adam
Kolejnym przykładem akordeonu jest rozwijana tabela. Jest to bardzo dobry przykład na to jak można zaoszczędzić dużo miejsca jednocześnie pozwalając przeglądającej osobie na rozwinięcie dodatkowych danych.
See the Pen Accordion table by Adam (@adahei) on CodePen.
Autor: Ren Aysha
Przykładowy socjal akordeon rozwijany horyzontalnie, po szerokości strony.
See the Pen Pure CSS Horizontal Accordion by Ren Aysha (@rrenula) on CodePen.
Autor: Srdjan Pajdic
See the Pen Sexy Accordion by Srdjan Pajdic (@MightyShaban) on CodePen.
Autor: Chris Wright
See the Pen CSS Responsive animated Accordion by Chris Wright (@chriswrightdesign) on CodePen.
Znacie inne ciekawe przykłady zastosowania akordeonu na stronie możecie podzielić się nimi w komentarzu.
Dodatkowe tagi:
Collapse, FAQ
rozwijaki i zwijaki
gotowe rozwiązania
przykładowe realizacje
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…