In this tutorial, I will show you how to make a fancy social jQuery sidebar like the one overhere. If you think its too fancy for you, I will also show you how to make an animation like this one.
Nice? Well lets get started!
MARKUP
First up, we need to have some markup. You can place this in your <body> tag, OUTSIDE any other tags:
</pre> <div id="socialicons"><a href="http://www.facebook.com/" target="_blank"> </a><a href="http://www.facebook.com/" target="_blank"> </a> <a href="http://www.twitter.com/" target="_blank"> </a><a href="http://www.twitter.com/" target="_blank"> </a> <a href="http://www.youtube.com/user/" target="_blank"> </a><a href="http://www.youtube.com/user/" target="_blank"> </a></div> <pre>
Nothing much there, just a main “social icon” container with a three div containers.
CSS
Next, lets style this markup using some CSS. We’re going to use an image sprite to improve performance.
#socialicons {
position: absolute;
top:20px;
left:0px;
}
#facebook {
margin-left: -92px;
width: 109px;
height: 26px;
background: url(images/social.png);
background-position: 0px 0px;
cursor: pointer;
}
#twitter {
margin-top: 20px;
margin-left: -92px;
width: 109px;
height: 30px;
background: url(images/social.png);
background-position: 0px -55px;
cursor: pointer;
}
#youtube {
margin-top: 20px;
margin-left: -92px;
width: 109px;
height: 26px;
background: url(images/social.png);
background-position: 0px -30px;
cursor: pointer;
}
We’re using a sprite and only one image to minimize the HTTP GET requests (and increase performance).
There’s an image you need to save at this point. create a folder name “images” and save ONE of the following images in that folder. save the image as “social.png”:
SCRIPT
Finally, the script. The script is jQuery mainly, so you need to add the following JQuery library in the <head> tag.:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
And finally, the following JQuery script (in the <head> tag :
$("#facebook,#twitter,#youtube").hover(function(){
$(this).stop().animate({marginLeft:"0px"}, 600,
function()
{
$(this).animate({marginLeft:"-50px"},346,
function()
{
$(this).animate({marginLeft:"0px"},346);
});
});
},
function()
{
$(this).stop().animate({marginLeft:"-92px"}, 300);
});
This is the more fancy script, the one that goes out and back in again. If you simply want it to slide outwards, replace the above script with this:
$("#facebook,#twitter,#youtube").hover(function(){
$(this).stop().animate({marginLeft:"0px"}, 600);
},
function()
{
$(this).stop().animate({marginLeft:"-92px"}, 300);
});
And that’s it! I hope you enjoyed the tutorial, if you shall have any questions, please comment bellow.
_Sand
// ]]>
By Adriana February 24, 2012 - 7:00 pm
thanks for share!
By Paul March 22, 2012 - 6:22 pm
hey nice sidebar, what is the font you are using there?
By Mohammed April 5, 2012 - 5:53 pm
I’m sorry I don’t really remember what font it was. I edited it in MS paint, I’m sure it’s a default font on MS windows.
By Brennda April 19, 2012 - 11:42 pm
Hello just wanted to give you a quick heads up. The text in your atlcire seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The design and style look great though! Hope you get the issue resolved soon. Many thanks