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

facebook sliderTym razem mamy do czynienia z nieco inny podejściem. Ten Slider Facebook-a został zbudowany i działa bez użycia JavaScrtipt. Jedno czego potrzebujemy to wygenerowany kod HTML, oraz CSS. Opcją (preferowaną) jest skorzystanie z ikon Font Awesome, które bardzo przyspieszą cały proces instalacji na stronie. Zastosowanie innej biblioteki ikon wymagało by pewnych drobnych regulacji, ale nie będzie to bardzo trudne.

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 Demo

z0 – 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ć:

1

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.

 

 

Wpis otagowano:

Komentarze do wpisu 8 komentarzy

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *