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.

Zobacz demo Pobierz .zip

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.

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

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

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

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

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

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

Zobacz demo Pobierz .zip