Create a Social Media Sharing Menu Using CSS and jQuery

Apr 30 2010 by Kawsar Ali | 39 Comments

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

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

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.

39 Comments

Ralph

April 30th, 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 :(

Ralph

infokhaledz

April 30th, 2010

Thank you very much…

Sun Pietro

April 30th, 2010

nice and simple :)

Diana

April 30th, 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 http://www.flashmint.com and I love the one with the strawberry :)

Bruno Couto

April 30th, 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

April 30th, 2010

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

Jordan Walker

April 30th, 2010

great tutoria, thanks for sharing.

Bertrand

April 30th, 2010

Well explained and simple, thanks!

Damon

April 30th, 2010

I would group the images into a sprite also.

Webanddesigners

April 30th, 2010

Simple but useful tutorial thanks.

Matt

April 30th, 2010

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

April 30th, 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

April 30th, 2010

So simple but yet so useful!

Cliff

April 30th, 2010

Great article that’s simple but essential!

skyje

April 30th, 2010

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

piyashrija

April 30th, 2010

nice and simple..thanks for idea

John Parrish

April 30th, 2010

It’s not working in IE does anyone know why

Danang Sukma

May 1st, 2010

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

Shaimifch

May 1st, 2010

“1 Create the HTML” missed the ending tag

</li>

GrĂ¼n Weiss

May 3rd, 2010

cool stuff, nice works

James

May 3rd, 2010

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

Mike

May 6th, 2010

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

Oliver

May 7th, 2010

Hello, hope all is well.

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

Oliver

Olli

May 15th, 2010

Thanks for this tutorial. Works well… on WordPress

ahkeno

May 19th, 2010

Thank for sharing…Nice article for me

Design Hippo

May 27th, 2010

Nice simple tutorial. Thanks

kamaru786

May 28th, 2010

Thanks for this tutorial. Works wel

PC Repair

June 6th, 2010

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

Vijay Nemade

June 9th, 2010

Thanks for sharing.
Nice simple tutorial.

mrzeroman

June 19th, 2010

Thank you .may be learn more in the future.

laidingqing

June 20th, 2010

why not split the image?

Farid

September 15th, 2010

Kawsar,

simple… nice post.

Thanks a lot.

Joe

November 22nd, 2010

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

December 18th, 2010

Thanks for the tut. Used it on http://joseph96.com/share/

ameya

April 26th, 2011

Thats good tutorial.

Moksha

May 18th, 2011

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

ertan

October 20th, 2011

that was nice

Leave a Comment

Subscribe to the comments on this article.