Create a Social Media Sharing Menu Using CSS and jQuery

Social Media Sharing Menu Using CSS and jQuery

In this tutorial, we will show you how to create a social media share menu using CSS and jQuery. We are going to create the menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Final Result

Click on the image below to view the live demo.

Final Result

Create the HTML

1 Let’s create the HTML first. Here is our markup.

<div id="social_nav_horizontal">
  <h3> Bookmark or Share This Post </h3>
    <li><a class="delicious" href=" website title" title="Bookmark on">Delicious</a>
    <li><a class="facebook" href=""  title="Share this on Facebook" >Facebook</a></li>
    <li><a class="stumbleupon" href=" url=" title="Stumble This Page" > Stumble</a></li>
    <li><a class="twitter" href=" Website Title-" title="Tweet This Page" >Twitter</a></li>

Style the HTML with CSS

This is how our menu looks without any CSS.

Notice that there is a CSS class added to each link in our HTML. For example: delicious, facebook, and so on. We use different classes so that we can give the links their own icons on the left (more on this later).

2 We will make the list items display side by side by using the float property. Also, we have added some padding to the link elements (#social_nav_horizontal ul li a), including 28px padding on the left so that when we add the background, there is enough space for the social media icons.

#social_nav_horizontal {
  margin-left: 100px;
  font-family: Futura, Verdana, Sans-Serif;
  font-size: 18px;
  color: #8e9090;
#social_nav_horizontal h3 {
  padding: 0px 10px;
  border-bottom:dashed 1px #ccc;
#social_nav_horizontal ul {
  margin: 0;
  padding: 0;
#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;

Here’s how our menu looks with the above CSS style declarations.

3 After that, we add the CSS background to each class. You can use your own social media icon sets or check out the Freebies section here on Six Revisions to find free social media icons. Note that you will have to adjust the background-position and the left padding of #social_nav_horizontal ul li a depending on the sizes of the social media icons you use.

Here is the CSS for the first social media link (Delicious).

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;

Here is the visual representation of this code:

This is how the Delicious icon should display:

4 We add a CSS declaration for each of the social media links.

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

Another version: Vertical menu

So, if you want to create a CSS only menu, you’re done.

But now, we are going to add a little jQuery and change the menu’s orientation to spice it up a little. This one will be vertical menu.

5 I just took off the CSS float property from the list item declaration (#social_nav_horizontal ul li) to covert it to a vertical menu.

Add animation effects with jQuery

Time to add some jQuery. First, do not forget to add the jQuery library to your HTML page (here’s a guide for that, if you’re not familiar with jQuery).

We will be adding an effect that nudges the link to the right when the user hovers over it.

6 In the first line of our jQuery script, we select the elements we want to apply the effect to: #social_nav_horizontal ul li a.

We apply an event listener method, .hover, which will listen to the event that the user hovers over (and out of) a link item. We feed the .hover method the functions we want to execute when the user hovers over a link item (first function), and also when they hover out of the link (second function).

We use the .animate method on the hovered-over element to move them to the right by modifying its margin-left CSS property.

We also use the .stop method before the .animate method to prevent the animation from queuing it up. Basically, the .stop method will stop any other ongoing animation events on $(this) element.

$(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);

Here is how it looks when someone mouses over a link.

You can check out the demo to see it working.

Wrap up

That’s it! Please feel free to add any suggestions to improve this in the comments.

Download Source Files

Related Content

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

This was published on Apr 30, 2010


Ralph Apr 30 2010

You could do this in pure CSS….

#social_nav_horizontal a { -webkit-transition: margin-left 0.3s ease-in; }

But it wouldn’t work in non-webkit browsers :(


infokhaledz Apr 30 2010

Thank you very much…

Sun Pietro Apr 30 2010

nice and simple :)

Diana Apr 30 2010

That’s a great tutorial and I can use it with my little to no skills :) BTW I’ve seen cool JQuery websites at and I love the one with the strawberry :)

Bruno Couto Apr 30 2010

I would do it in another way… this one isn’t the better, and it’s buggy… try to over the logo and you’ll see why. It should be given a padding-left and not a margin left, in order to keep the the hover event on the link.

Ted Thompson Apr 30 2010

Great tutorial Kawsar, thanks for taking the time to put together. Cheers Ted

Jordan Walker Apr 30 2010

great tutoria, thanks for sharing.

Bertrand Apr 30 2010

Well explained and simple, thanks!

Damon Apr 30 2010

I would group the images into a sprite also.

Webanddesigners Apr 30 2010

Simple but useful tutorial thanks.

I absolutely love the result of this. I haven’t tried the tutorial yet but I’m definitely going to have to, as it seems quite easy to do.

Rilwis Apr 30 2010

There is a better way to create a social bookmarking script – store the name and submit url of social networks in an array and using loop to show them. For more detail, please read this article. Using this concept, we can easily expand the script for more social networks.

Rochelle Dancel Apr 30 2010

So simple but yet so useful!

Cliff Apr 30 2010

Great article that’s simple but essential!

skyje Apr 30 2010

It is cool and i added it to my blog but social icons not appearing on all versions of internet explorer

piyashrija Apr 30 2010

nice and simple..thanks for idea

John Parrish Apr 30 2010

It’s not working in IE does anyone know why

Danang Sukma May 01 2010

thank for your articel, im just googling to seeking inspiration for my social media menu. So Simple, I like it!

Shaimifch May 01 2010

“1 Create the HTML” missed the ending tag


GrĂ¼n Weiss May 03 2010

cool stuff, nice works

James May 03 2010

Great post, really like the simplicity of it! Exactly what Jquery’s all about!

Thanks for sharing, anything which is related to Social Media is useful for bloggers and can be implemented to increase visitors

Oliver May 07 2010

Hello, hope all is well.

Will this work on WordPress, on a blog? I would appreciate to know, thank you.


Thanks for this tutorial. Works well… on WordPress

ahkeno May 19 2010

Thank for sharing…Nice article for me

Design Hippo May 27 2010

Nice simple tutorial. Thanks

kamaru786 May 28 2010

Thanks for this tutorial. Works wel

PC Repair Jun 06 2010

Having some problems getting this to work in Chrome. Has anyone else gotten it working with Chrome?

Vijay Nemade Jun 09 2010

Thanks for sharing.
Nice simple tutorial.

mrzeroman Jun 19 2010

Thank you .may be learn more in the future.

laidingqing Jun 20 2010

so easy

laidingqing Jun 20 2010

why not split the image?

Farid Sep 15 2010


simple… nice post.

Thanks a lot.

Wow, this is very informative, thank you!

I have one question though, what’s the best practice for handling the case where the user puts the mouse over the icon? The animation starts to “jump” back and forth when the mouse is positioned (and jiggled around). Would you use a parent ‘div’ element somehow?

Joseph Dec 18 2010

Thanks for the tut. Used it on

taymoor Dec 23 2010

gud work

ameya Apr 26 2011

Thats good tutorial.

Moksha May 18 2011

Ali thanks you have explain it very nice and it look very simple to apply the animation.

ertan Oct 20 2011

that was nice

This comment section is closed. Please contact us if you have important new information about this post.