Social Media Tab

Nach langer Suche habe ich nun endlich ein fertiges „Social Media Tab“ gefunden, das als Tab am rechten Rand platziert ist und bei MouseOver mittels jQuery „ausfährt“.

Social media tab 01.jpg

Dafür wird ein CSS, ein Javascript und natürlich der Inhalt in HTML benötigt:

HTML

Es ist ziemlich egal, wo man diese DIVs einfügt (solange sie nicht in anderen DIVs sind). Ich habe sie am Ende der Seite, vor dem BODY-Tag, hingeschrieben.

<div class="social_tab">
  <div class="social_content">
    <span>Hier kommt das Facebook-IFrame rein</span>
  </div>
</div>

CSS

Die angegebene Hintergrundgrafik gibt es bei der Quelle herunterzuladen (siehe unten).

.social_tab {
float:right;
width:247px;
height:385px;
background: url(../images/fb_tab_R.png) no-repeat !important;
display:block;
right:-205px;
padding:0;
position:fixed;
top: 170px;
z-index:1002;
}
.social_content {
padding: 8px 5px 0pt 50px;
}

Javascript

In der HTML-Datei muss man natürlich im Header jQuery einbinden, z. B. mit:

<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>

Anschließend gleich nach dem BODY-Tag:

<script type="text/javascript">
        jQuery(function (){
            jQuery(".social_tab").hover(function(){
            jQuery(".social_tab").stop(true, false).animate({right:"0px"},"medium");
        },function(){
            jQuery(".social_tab").stop(true, false).animate({right:"-205px"},"medium");
        },500);
            return false;
        });
</script>

Verbesserungen für Touch-Devices

Leider funktioniert der Hover-Effekt nicht bei Touch-Devices.

Dazu blendet man das Feld mittels CSS-Weiche einfach aus:

@media only screen and (max-device-width:1024px) {
#social_tab {
	display:none;	
}
}

Quelle

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

Loading…
Avatar von manuel

AUTOR

manuel