Social Media Sharing Menu (CSS & jQuery)

Create a Social Media Sharing Menu, es un tutorial donde se les mostrara como crear un menú de medios sociales que comparta tus noticias. Usa exclusivamente CSS y jQuery . Como CSS básico utiliza la propiedad CSS background-position y un poco de jQuery para hacer las animaciones en los enlaces. Útil y bastante simple de adaptar a nuestros post wordpress (single.php).
Resultado Final: Demo - Descraga Archivos  social-share-css-jquery (ZIP, 0.017 MB)
Info Create a Social Media Sharing Menu Using CSS and jQuery by sixrevisions

PLAIN TEXT

 HTML:

 

<div id="social_nav_horizontal">
<h3>Bookmark or Share This Post</h3>
<ul>
    <li><a class="delicious" title="Bookmark on del.icio.us" href="http://del.icio.us/post?url=Your website title">Delicious</a></li>
    <li><a class="facebook" title="Share this on Facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com">Facebook</a></li>
    <li><a class="stumbleupon" title="Stumble This Page" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/"> Stumble</a></li>
    <li><a class="twitter" title="Tweet This Page" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName">Twitter</a></li>
</ul>
</div>

 

PLAIN TEXT

CSS:

 

#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8e9090;
}
#social_nav_horizontal h3 {
display:inline;
padding: 0px 10px;
border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top:20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}
.delicious {
background:url(images/delicious.png) no-repeat;
background-position:0px -1px;
}
.facebook {
background:url(images/facebook.png) no-repeat;
background-position:0px -1px;
}
.stumbleupon {
background:url(images/stumbleupon.png) no-repeat;
background-position:0px -1px;
}
.twitter {
background:url(images/twitter.png) no-repeat;
background-position:0px -1px;
}

 

PLAIN TEXT

JavaScript:

 

$(document).ready(function() {
$('#social_nav_vertical li a').hover(
// on mouse over move to left
function() {
$(this).stop().animate({ marginLeft: '20px' },300);
},
// on mouse out, move back to original position
function() {
$(this).stop().animate({ marginLeft: '0px' }, 300);
});
});