Skip to main content ↓
Graphic of a social media sharing menu with options for Delicious, Facebook, StumbleUpon, and Twitter, and text reading 'Bookmark or Share This Post' and 'Social Media Sharing Menu'.

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> <ul> <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> </ul> </div>

Style the HTML with CSS

This is how our menu looks without any CSS.

29 01 step 01 social menu

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.

29 02 step 02 social menu

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:

29 03 step 03 social menu

This is how the Delicious icon should display:

29 04 step 04 social menu

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.

29 05 step 05 social menu

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.

29 06 step 06 social 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); }); });

29 07 step 07 social menu

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

You can check out the demo to see it working.

29 08 step 08 social menu

Wrap up

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

Download Source Files

Related Content

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator