Facebook slider już nie raz był tematem na tym blogu, a ponieważ wpisy dotyczące tego rodzaju rzeczy cieszą się sporym zainteresowaniem postanowiłem dodać coś nowego w tym właśnie temacie.
Chęć posiadania LikeBoxa (który już niedługo zostanie zastąpiony Page Pluginen) w „przyklejonym” do okna przeglądarki okienka jest dosyć spora. Takie rozwiązanie jednocześnie wyróżnia, to co się w nim znajduje, ale też nie rzuca się w oczy. No i jest to też ciekawe urozmaicenie na stronie.
z0, czyli tabsy bez JS
To w zasadzie wszystko. z0, bo tak brzmi nazwa kodowa Slidera Facebook-a bez JS, powinien działać we wszystkich współczesnych przeglądarkach i w sporej części tych starszych.
Pod linkiem poniżej znajduje się strona demonstracyjna tego tworu, zapraszam:
Strona Demoz0 – Facebook slider dla leniwych
Przyznam, że HTML i CSS są nieco zawiłe w tym rozwiązaniu. Dla ułatwienia stworzyłem prosty generator kodu, dzięki któremu w łatwy i szybki sposób stworzymy zakładki i pasujący do nich kod CSS. 🙂
Generator z0
Tak wygląda podstawowa wersja, którą z powodzeniem można na bardzo wiele sposobów modyfikować:
Warto zwrócić uwagę jak przy zmianie rozmiaru zakładki jest ona płynnie środkowana wertykalnie.
W porównaniu do MUSLI, z0 :
- Nie wymaga dodatkowych skryptów JavaScript, co za tym idzie nie potrzebuje dodatkowych bibliotek typu jQuery. Animacja odbywa się za pomocą CSS Transitions. Dla jednych może to być zaletą dla innych niekoniecznie.
- Ilość zakładek może być tak jak w MUSLI dowolna, ale tutaj wyświetlane są na ekranie maksymalnie 3. Możemy mieć bardzo dużo zakładek, a zajmą one zawsze tyle samo miejsca, minus tego rozwiązania to oczywiście to, że użytkownik nie może zobaczyć ile tych zakładek jest i wybrać od razu tej interesującej go.
- Szerokość slidera niestety musi być jednakowa dla wszystkich zakładek.
- Ciekawy efekt.
