Sidebar - wie bekomme ich das hin

mikemike · 25.06.2011

Hey,

suche jetzt schon über eine Stunde. Habe auf dieser Seite einen Social Slider gesehen http://www.bandyshirt.com/ und würde gerne wissen wie man so etwas macht. Haben wir hier ein tutorial? Ich habe nichts gefunden, aber vielleicht habe ich auch falsch gesucht.

Gruß
mikemike

mindraper · 25.06.2011

AW: Sidebar - wie bekomme ich das hin

Hi mikemike,

ich gehe mal davon aus, Du meinst den auf der linken Seite bei der von Dir angegebenen HP

das ist kein Hexenwerk:

In einem <div>-Container, der (zumindest würde ich das so machen) links angeordnet wird, setzt du 3 oder 4 (je nach Anzahl der SocialNetworks auf die Du verweisen willst) <a>-Elemente. Gib denen ne Klasse via class=""-Attribut, Beispiel:

Code:

<body>
<div id="sidebar">
   <a href="einSocialNetwork.com" class="sn-link" id="sn1">Social Network 1</a>
   <a href="neuesSocialNetwork.com" class="sn-link" id="sn2">Social Network 2</a>
   <a href="dasSocialNetwork.com" class="sn-link" id="sn3">Social Network 3</a>
</div>
.
.
.
</body>

Die <a>-Elemente, die im Standart inline-Elemente sind, gibst Du die Eigenschaft display:block; und jeweils über die ID das zuzuordnende Hintergrundbild. Mach das Bild gleich als EIN Bild im normalen und im :hover-Zustand, dann muss es dabei nicht nachgeladen werden. Bei dem Bild ist der Standartzustand oben, das hovern unten.

Wenn ein Besucher die Links mit der Maus überfährt, wird der :hover ausgelöst und das Hintergrundbild nach oben verschoben.

Dann baust du ein CSS, das ungefähr so aussieht:

Code:

#sidebar {
   position: absolute; /* position: fixed; wenn es mit "scrollen" soll */
   top: 100px; /* kommt halt drauf an, wie weit von oben weg */
   left: 0px;
   z-index: 9999; /* legt das div über alle anderen Elemente */
}

.sn-link:link, .sn-link:visited {
   display: block;
   width: 50px; /* größe hängt von der hintergrundgrafik ab, auch bei height */
   height: 100px;
   margin-bottom: 15px;
   background-repeat: no-repeat;
   background-position: top left;
   font-size: 0px; /* macht den text im link 0px groß */
   text-indent: -999999em; /* "schiebt" den text um 999999em aus dem viewport */
}
   .sn-link:hover, .sn-link:focus, .sn-link:active {
      width: 100px;
      height: 100px;
      background-position: bottom left;
   }

#sn1 {
   background-image: url(../pfad/zum/bild_1.jpg);
}

#sn2 {
    background-image: url(../pfad/zum/bild_2.jpg);
}

#sn3 {
    background-image: url(../pfad/zum/bild_3.jpg);
}

Wenn Du das Ganze so aufbaust, bekommst du es hin und hast gleichzeitig den Vorteil, dass Screenreader ebenfalls damit arbeiten können, zumindest besser als mit dem alt=""-Attribut von <img>-Elementen.

Kann das Ganze aber auch gern als Tutorial posten

mikemike · 25.06.2011

AW: Sidebar - wie bekomme ich das hin

@mindraper

Hey Du,

super danke, ich werde es gleich mal ausprobieren,

Gruß
mikemike

mindraper · 25.06.2011

AW: Sidebar - wie bekomme ich das hin

Klar, sag bescheid ob es gefunzt hat

Hatte das aus dem Kopf geschrieben, von daher keine Ahnung ob noch ein Fehler drinne ist

Sollte aber so gehen

Gruß zurück

mikemike · 26.06.2011

AW: Sidebar - wie bekomme ich das hin

@mindraper

Hey mindraper,

soweit hat es funktioniert. Jedoch springen beim mouse over, das jeweilige Icon statt nach rechts, nach unten und dabei verutschen alle Icins um eine Stelle. hover out, und alles ist wieder am richtigen Platz. Der hover effect sollte aber das Icon nach rechts versetzen und danach zurück in die Ursprungs Stellung gehen.
Gruß
mikemike

owieortho · 26.06.2011

AW: Sidebar - wie bekomme ich das hin

Hallo,

so am Ende der content.css findest Du:

Code:

/*Facebook, Twitter & Co. Slidebar Anfang*/
#follow_slidebar {
 position:fixed;
 top:160px;
 left:0px;
 z-index: 0;
}
.follow_1, .follow_2, .follow_3 {
 margin-top:10px;
 margin-left:-27px;
 width:62px;
 height:78px;
 filter:  alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
}
.follow_1 a, .follow_2 a, .follow_3 a {
 text-decoration:none;
}
.follow_1:hover, .follow_2:hover, .follow_3:hover {
 margin-left:0px;
 filter:  alpha(opacity=100);
 -moz-opacity:1.0;
 opacity: 1.0;
}
/*Facebook, Twitter & Co. Slidebar Ende*/

Und gleich zu Beginn des body:

HTML:

<div id="follow_slidebar">
  <div class="follow_1"><a rel="nofollow" href="http://www.facebook.com/pages/Bandyshirt/363644032902" target="_blank"><img src="/out/bandy/img/facebook.jpg" alt="facebook" /></a></div>
  <div class="follow_2"><a rel="nofollow" href="http://twitter.com/Bandyshirt_com" target="_blank"><img src="/out/bandy/img/twitter.jpg" alt="twitter" /></a></div>
  <div class="follow_3"><a rel="nofollow" href="http://www.youtube.com/bandyshirt" target="_blank"><img src="/out/bandy/img/youtube.jpg" alt="youtube" /></a></div>
</div>

Ich hab das jetzt nicht getestet, aber das sollte alles sein, was Du brauchst.

hubspe · 26.06.2011

AW: Sidebar - wie bekomme ich das hin

mindraper schrieb:
In einem <div>-Container, der (zumindest würde ich das so machen) links angeordnet wird, setzt du 3 oder 4 (je nach Anzahl der SocialNetworks auf die Du verweisen willst) <a>-Elemente. Gib denen ne Klasse via class=""-Attribut, Beispiel:

Code:

<body> <div id="sidebar"> <a href="einSocialNetwork.com" class="sn-link" id="sn1">Social Network 1</a> <a href="neuesSocialNetwork.com" class="sn-link" id="sn2">Social Network 2</a> <a href="dasSocialNetwork.com" class="sn-link" id="sn3">Social Network 3</a> </div> . . . </body>

Die <a>-Elemente, die im Standart inline-Elemente sind, gibst Du die Eigenschaft display:block;

schon wieder dieser Unfug mit den aufeinanderfolgenden Links.
Sowas gehört semantisch in eine ul.
Wenn du hilfst dann poste es doch bitte korrekt, schon im Interesse der Mitleser und des Fragenden.