A simple and concise social media sharing menu

Effect Preview

As shown above, you can also view the online effect.

Live demo.

Implementation process 1. Create the HTML of the menu Image

<div id="social_nav_horizontal">  
2. Add a CSS style (horizontal style)
#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;}
3. Add images to each link
.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;}
4. Add the mouse on animation using jquery
$(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);  });});
Complete
Social-share-CSS-jquery (ZIP, 0.017 MB)
Translation: http://sixrevisions.com/tutorials/web-development-tutorials/social-media-share-css-jquery/