HTML

Social Media Tab

10. 10. 2012

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

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Related Posts

HTML

Polaroid Galerie

8. 10. 2009

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

HTML

Lightbox mit maxWidth

10. 05. 2010

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

HTML

WebSlices in Homepage einbauen

24. 09. 2009

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...