In today web world Social Media is a very big factor. Whether your creating personal website or blogging website having a way for your reader to share your site is very important. In this post we will show you how to create a social media share menu using CSS and jQuery. We are going to create the menu using CSS background-position property and a little jQuery to make it more interactive.

View Demo | Download the Files

Let’s create the HTML first.

<div id="social_nav_horizontal">
<h3> Bookmark or Share This Post </h3>

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

This is how it looks without any CSS.

Notice that there is a CSS class added to each link for example: delicious, facebook and so on. That call will be used for the image on the side of links.Now we will add some CSS to the HTML.

#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; }

A little explanation for the CSS above. We are using CSS property float to align the list items horizontally. Also, we have added some padding to the link (#social_nav_horizontal ul li a), so when we add the background there is enough space and link sits on the bottom. Here is how it looks with the CSS style.

After that we add the background to previously mentioned class.
.delicious{ background:url(images/delicious.png)no-repeat; background-position:0px -1px; }

Here is the visual representation of this step:

How it looks the with the menu:

We add class for each of the 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; }

If everything is right here is how it should look.

So, if you want to create CSS only menu, thats the end. Now we are going to add a little jQuery and change the menu to spice it up a little. This one will be vertical menu. I just took off the CSS float property from the list item and styled it differently.

Time to add the jQuery. First, do not forget to add the jQuery. You can use the google hosted one or your own.

We will be adding what is called "Link Nudging Effect". Instead of nudging just the link text we will nudge each of the list item. Let's see the code first

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

In the first line we add the ID and specify  the list item we want to animate which is #social_nav_vertical li a . Then $(this) means above specified ID and .stop() prevents the animating from queueing it up. Even if we did not put the .stop(), this script will work. But, every time you mouseover each link the animation will build up. In simple, words .stop() allows one animation to be finished then move to the next one. marginLeft just tells how much the item should move when you move the mouseover.

Here is how it looks when someone mouseovers the link. You can check out the demo to see it working.

One suggestion if you wanted to move the just text instead of the each list item (<li>) you can replace marginLeft with paddingLeft. It will then just animte the link. Link Nudging usually works better with vertical menu better.

If you are thinking about using this on wordpress  checkout Pro Blog Desingn’s post on all the social media links.

That’s it! Please feel free to add any suggestion to improve it or if you find any mistakes.