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.
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.
