A fairly common sight in these modern times of social networking is the famous Twitter tab. This is a tab that floats on the left or right hand side of your browser window & follows you. Here is how to go slightly further than that by making it slide out.

A day or so ago someone asked me how to make one of these, so instead of just telling them I thought I’d post it here as a snippet of code that everyone can use. What you use it for is entirely up to you, but most people use it for social networking such as Twitter.

Before we get started here is a small demo to show how the slide out tab works. Obviously you would fill it with something a lot more useful than I have, but it’s just to show you how it could look and that it does actually work.

jQuery slideout tab demo

View Demo

Now that you’ve seen the demo let’s get started. Here we go.

$(function() {
	$('#slideout').hover(function() {
		$(this).animate({left:'0px'}, {queue:false, duration: 500});
	}, function() {
		$(this).animate({left:'-280px'}, {queue:false, duration: 500});
	});
});

However that might get a little annoying for the user as it will slide out every time they hover their mouse over it. It would probably be better to slide on click. So to do that you just need to change hover to toggle. Instead of making your whole div clickable though you’ll want to make a box and float or position a box that will be clickable or the user will not be able to interact with the box once it slides out. Your HTML could look something like this.

<div id="slideout">
	<div id="slidecontent">
		Your Content!
	</div>
	<div id="clickme">

	</div>
</div>

With some CSS like this.

#slideout {
	background:#666;
	position:absolute;
	width:300px;
	height:80px;
	top:45%;
	left:-280px;
}
#clickme {
	float:right;
        height:80px;
        width:20px;
        background:#ff0000;
}
#slidecontent {
        float:left;
}

Now the jQuery needs to change a little too.

$(function() {
	$('#clickme').toggle(function() {
		$(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
	}, function() {
		$(this).parent().animate({left:'-280px'}, {queue:false, duration: 500});
	});
});

Now I never claimed to be a great designer so my CSS is correct, but the coloring is awful. :lol: The point is that it works & you can spruce it up until you are happy with it. That’s it. Have fun. :)

If any regular readers are wondering, these little snippets are just so that the site isn’t left with no new posts for a long period of time. Sometimes I just don’t have any inspiration for new full tutorials, or I might not have enough time to write a massive post. So rather than have a huge gap between posts I’ve decided to post these little tips & snippets. I hope they help new readers & regulars alike.