Social Networking Sidebar Box That Expands On Hover

Question

Been trying for a while to get this to work and would be grateful for any help.

What I am trying to make is the social network sidebar boxes that slide out from the edge of the screen on hover, I just don't get how to do it.

Example of what I am trying to do: http://journal.digital-atelier.com/1/

Answer 1

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);
});