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.
[button url=’/tutorial/slideoutwidget’ size=’large’ style=’blue’]Demo[/button][button url=’/tutorial/slideoutwidget/slideoutwidget.zip’ size=’large’ style=’red’]Pobierz[/button]
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ę.
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.
|
1 2 3 4 5 6 7 8 |
<div class="slideout-widget widget-facebook"> <div class="slideout-widget-handler"> <i class="icon-facebook"></i> </div> <div class="slideout-widget-content"> <a href="https://www.facebook.com/webmastahPL">webMASTAH @ Facebook</a> </div> </div> |
CSS
Widget może być wykorzystany w dowolny sposób, stwórzmy więc uniwersalny styl.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.slideout-widget { position: fixed; right: -15em; top: 50%; transition: right .4s; width: 15em; z-index: 10; } .slideout-widget:hover { right: 0; } .slideout-widget-handler, .slideout-widget-content { background: #eee; border: 1px solid #ddd; padding: 1em .5em; } .slideout-widget-handler { border-right: none; left: -3em; position: absolute; text-align: center; width: 3em; } .slideout-widget-content { border-width: 1px 0; overflow: hidden; width: 100%; z-index: 11; } |
Jak już wspomniałem, często widget zawiera link do Facebooka – ostylujmy go odpowiednio.
|
1 2 3 4 5 6 7 8 9 10 |
.widget-facebook .slideout-widget-handler, .widget-facebook .slideout-widget-content { background: #3c5b9b; border: none; } .widget-facebook, .widget-facebook a { color: #fff; } |
Zróbmy też style dla Google+ i Twittera.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.widget-gplus .slideout-widget-handler, .widget-gplus .slideout-widget-content { background: #d64136; border: none; } .widget-gplus, .widget-gplus a { color: #fff; } .widget-twitter .slideout-widget-handler, .widget-twitter .slideout-widget-content { background: #19bfe5; border: none; } .widget-twitter, .widget-twitter a { color: #fff; } |
Jeśli widget ma zawierać większą treść, typu wklejka Likebox, przyda się jego szersza wersja.
|
1 2 3 4 |
.slideout-big { right: -20em; width: 20em; } |
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”.
|
1 2 3 4 5 |
@media (max-width: 768px) { .slideout-widget { display: none; } } |
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.
[button url=’/tutorial/slideoutwidget’ size=’large’ style=’blue’]Demo[/button][button url=’/tutorial/slideoutwidget/slideoutwidget.zip’ size=’large’ style=’red’]Pobierz[/button]
- 107podań
- Facebook2
- Twitter37
- LinkedIn32
- Email36
