Here is an example ----> FIDDLE
Here is another example with two sliding out -----> FIDDLER 2 SLIDE
Setting an Item to fixed, part off the screen, and part on the screen. Then you just animate on some event. Either mouseenter
or click
Just some sample code to accompany the Fiddle Link above. Follow the Fiddle link to see more
$('body').on('mouseenter','#social-hover',function(){
$('#social-hover').animate({
left: '150px'
},250);
$('#social-main').animate({
left: '0px'
},250);
});
$('body').on('mouseleave','#container',function(){
$('#social-hover').animate({
left: '0px'
},250);
$('#social-main').animate({
left: '-150px'
},250);
});