HTML

<div id="face-slider">
	<div id="tab"></div>
	<div id="face-code">KOD FACEBOOK SOCIAL BOX TUTAJ</div>
</div>
		

CSS

#face-slider{
	position:fixed;
	right:-302px;
	top:190px;
	z-index:100;
}
#face-slider #tab{
	cursor:pointer;
	height:110px;
	width:35px;
	float:left;
	background: url(img/facebook-slider.png) no-repeat center center;
}
#face-code{
	padding:5px;
	border: solid #0170cf 3px;
	background: #fff;
	float:left;
	width:286px;
	height:296px;
	-moz-border-radius: 0 0 0 8px;
	-webkit-border-radius: 0 0 0 8px;
	border-radius: 0 0 0 8px;
}

jQuery

W sekcji head strony

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Gdzieś w sekcji body strony

<script>
$(function(){
	$('#face-slider').hover(
		function(){	$('#face-slider').stop().animate({"right": "0"}, 1000); } ,
		function(){ $('#face-slider').stop().animate({"right": "-302px"}, 1000); }
	);
});
</script>

Demo

Wróć do artykułu na WPadmin.pl omawiającego tematykę Social Slider Facebook →