Wysuwany widget na stronę

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

podań

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

Łukasz Migut

Właśnie coś takiego chciałem zamieścić na stronie super sprawa, że jest to sam css bez jQuery. Dzięki wielkie!
- sbl
  
  z jQuery jest taki problem, że on kolejkuje eventy i gdy najedziesz bardzo szybko na dany element powiedzmy 10 razy to jQuery wykona to 10 razy jedno po drugim. CSS jest lepsze.
  - Lewiatan
    
    w jQuery można kolejkę wyłączyć i nie ma takiego problemu 😉
    - Tomasz Żełudziewicz
      
      Można wyłączyć kolejkę? A ja zawsze głupi robił flagę i timeout 🙁
  - Daredzik
    
    animate -> complete
    oraz stop(true,true) :))
Kriss

a ja myślałem ze to plugin do wordpressa, nie chciał mi się zainstalować – wprowadzacie ludzi w błąd 😉 Dlatego poczekam na wersję łatwą w instalacji 😛
Daredzik

jest tylko jedno małe ale ie8… a pisząc coś dla jakiejś korporacji niestety trzeba zapewnić im wsparcie dla ich własnej podwórkowej przeglądarki. Niestety o ie8 jeszcze długo nie zapomnimy ….
- Marcin Bazanowski
  
  Ie8 to dzis tylko 5%, biorac jeszcze pod uwage ze nie wszyscy wymagaja zeby na ie8 strona dzialala w 100% poprawnie, to raczej mala strata, jesli nie zobacza tej animacji.
  
  A dalej idac jeszcze na tym konkretnym przykladzie, roznica miedzy chromem a ie8 jest taka, ze w chrome bedzie animacja, a w ie8 po prostu sie pojawi nagle cala zakladka. Strata animacji? najwyzszy czas zmienic przegladarke 😀
  
  Koniec wspierania dinozaurow!
  - nrm
    
    zależy kto ma jaką publikę, dla przykładu na mastahu wygląda to tak:
    
    Chrome 42% (w tym 29.0 – 40%, 28.0 – 2%, reszta poniżej procenta) Firefox (w tym: 23.0 – 33%, 22.0 – 0.9%, reszta marginalnie), Opera – 6%, Mobile – 9%, IE – 2% (!!!), w tym 10.0 – 0.9%, 9.0 – 0.5%), Safari – 1.6%
    - Łukasz Migut
      
      Tak ale mastah jest dla webmasterów więc to specyficzna grupa jeśli chodzi o używanie przeglądarek.
      - nrm
        
        Zgadza się, dlatego podałem to jako ciekawostkę 😉 Ogólnokrajowe trendy można sprawdzić na ranking.pl
      - Łukasz Migut
        
        przyda się dzięki
  - Daredzik
    
    Niestety ale ie8 jest obecna na komputerach korporacyjnych gdzie siedzi xp wiec… jeśli klient zleca Ci napisanie czegoś gdzie 50% to ładne animacje i u niego to nie działa to uwierz z jaką frustracją zadzwoni do Ciebie następnego dnia tuż po 7 😉 tak więc musiałem przepisywać css3 na jquery 😉
MrShemek

IcoMoon poskłada nam font ale chyba dopiero po opłaceniu, tak?:>
Przydałby się tutorial o sliding doors, wykorzystaniu 2-3 grafik na całą stronę.
Czasem przeglądając pracę innych, na szybkim łączu, widzę efekt „przeskoku”…
- mck
  
  IcoMoon jest darmowy. Płatne są tylko niektóre zestawy ikon i hosting CDN.
  - MrShemek
    
    Jakoś poprzednim razem nie mogłem znaleźć miejsca gdzie generuje się font, teraz już mi się udało. Dzięki!
bastek

Czemu po dodaniu mam http://brandujemy.pl/znaczki.jpg ?
- mck
  
  To we wszystkich przeglądarkach? Jeśli tak, to ścieżki do fontów są niepoprawne. Jeśli zaś działa w Chrome, to problem leży w ładowaniu fontów z serwera i wówczas do katalogu z fontami należy dorzucić plik .htaccess z następującą treścią:
  
  ZSH
  
  Header set Access-Control-Allow-Origin "*"
  
  1
  
  Header set Access-Control-Allow-Origin "*"
Tomek

Witam,
Pomoże mi ktoś zaimplementować taki widget na stronę pod prestashop? 🙂
Pozdrawiam
TM
pawel

W ie10 nie działa poprawnie (skacze)
Daniel Bobrowski

jak to zainstalowac?
Zdz h. Leliwa

Obciąłem ten widget do G+ ale teraz chciałbym dodać tak samo wysuwany widget Pinteres-a
Pomożesz mi ktoś?

Lista „zakupów”

HTML

CSS

Podsumowanie

Zobacz też