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.

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.