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>
#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; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script> $(function(){ $('#multitab li').hover( function(){ $(this).stop().animate({"right": "302px"}, 1000); } , function(){ $(this).stop().animate({"right": "0"}, 1000); } ); }); </script>
Wróć do artykułu na WPadmin.pl omawiającego tematykę Multi Social Slider Facebook →