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

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

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...