create a social network menu using html

Save 15% On Pluralsight - Annual Subscription Only $299

Pluralsight courses
LinkedIn Premium uses PayScale to estimate job salaries

Save 15% On Pluralsight - Annual Subscription Only $299


Premium (Not Free) Video Tutorials

Free Video Tutorials & Free Tools

null

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.

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

Bookmark or Share This Post


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.

2

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:

4

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

credit goes to sixrevisions

Related posts:

  1. Integrate joomla with facebook Do you want to integrate joomla with facebook for things...
  2. Photoshop – create cs3 icons Step 1 When I want to create an effect that...

Related posts brought to you by Yet Another Related Posts Plugin.

Comments

One Response to “create a social network menu using html”
  1. sanjay tiwari says:

    thats a nice and helpful website for larning for biginnrs

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Powered by WP Hashcash

This blog uses the cross-linker plugin developed by Web-Developers.Net