Wysuwany widget na stronę

Kojarzycie niewielkie okienko wyjeżdżające z boku strony? Jestem pewien, że tak. Zwykle jest to link do serwisu społecznościowego lub wklejka z Facebookowym Likeboxem. Rozwiązanie to cieszy się coraz większą popularnością, a co za tym idzie powstaje wiele lepszych i gorszych implementacji, często przeładowanych jQuery. W niniejszym tutorialu wykorzystamy dobrodziejstwa CSS3, które pozwolą uniknąć tworzenia niepotrzebnych skryptów.

DemoPobierz

Lista „zakupów”

Bazą dla naszego poligonu doświadczalnego będzie niezastąpiony Twitter Bootstrap. Wykorzystamy też ikonki popularnych serwisów społecznościowych z fantastycznego generatora IcoMoon, który poskłada je w jedną czcionkę.

icomoon

HTML

Potrzebny kod HTML jest bardzo prosty. Cały widget składa się z uchwytu z ikonką, który będzie widoczny cały czas na stronie, treści wjeżdżającej na stronę i kontenera, który wszystko będzie trzymał w kupie.

CSS

Widget może być wykorzystany w dowolny sposób, stwórzmy więc uniwersalny styl.

Jak już wspomniałem, często widget zawiera link do Facebooka – ostylujmy go odpowiednio.

Zróbmy też style dla Google+ i Twittera.

Jeśli widget ma zawierać większą treść, typu wklejka Likebox, przyda się jego szersza wersja.

Przy niskich rozdzielczościach, gdy treść strony zajmuje całą szerokość ekranu, widgety mogą niepotrzebnie zasłaniać widok, co często irytuje użytkowników. Ukryjmy więc widgety w rozdzielczościach „mobilnych”.

Podsumowanie

To wszystko. Jako że widget jest bardzo prosty i łatwy w konfiguracji, nic nie stoi na przeszkodzie, by dopasować go do każdej strony.

Obsługiwane przeglądarki: Firefox 16+ Chrome 26+ Opera 12.1+ i IE 10+. W poprzednich wersjach konieczne będzie dodanie prefixów lub wykorzystanie automatycznych rozwiązań, takich jak -prefix-free.

DemoPobierz

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

Send this to a friend