HTML

Gdzieś w sekcji body - poza pozostałym kodem strony.

<ul id="multitab">
	<li>
		<img src="img/facebook-slider.png" />
		<div>TUTAJ NP KOD Z FACEBOOKA</div>
	</li>
	<li>
		<img src="img/googleplus.png" />
		<div style="border: solid #cd3c2a 3px;">TUTAJ NP KOD Z GOOGLE PLUS</div>
	</li>
	<li>
		<img src="img/rozne.png" />
		<div style="border:solid #46832c 3px;">Treść zakładki z różnościami :-)</div>
	</li>
	<li>
		<img src="img/youtube.png" />
		<div style="border:solid #cd3c2a 3px;">Zawartość zakładki z YouTube</div>
	</li>
</ul>

		

CSS

#multitab{
	position:fixed;
	right:0px;
	top:190px;
	z-index:100;
}
#multitab li{
	cursor:pointer;
	width:35px;
	height:110px;
	margin-bottom:1px;
	position:relative;
}
#multitab > li > div{
	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;
	position:absolute;
	top:0;
	left:35px;
	z-index:100;
}

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(){
	$('#multitab li').hover(
		function(){ $(this).stop().animate({"right": "302px"}, 1000); } ,
		function(){ $(this).stop().animate({"right": "0"}, 1000); }
	);
});
</script>

Demo

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

Galeria zakładek do pobrania