Wysuwany widget na stronę

17 września 201317 września 2013 Mariusz Kuta komentarze 22 css3, tutorial, widget

Total: 104
2
37
31
34

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.

Demo Pobierz

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>

</div>

<a href="https://www.facebook.com/webmastahPL">webMASTAH @ Facebook</a>

</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;
}

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

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

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

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

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

Demo Pobierz

Lista „zakupów”

HTML

CSS

Podsumowanie

Zobacz też