$('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);
});
#social-main{
position: fixed;
top: 150px;
left: -150px;
width: 150px;
height: 100px;
background: #000;
z-index: 100;
}
#social-hover{
position: fixed;
top: 150px;
left: 0px;
width: 50px;
height: 50px;
background: red;
z-index: 100;
}
----------------------------------------------------
Tutaj dowolna treść
#panel {
box-sizing: border-box;
width: 200px; /* szerokość panelu */
height: 300px;
position: fixed;
top: 100px;
background-color: yellow;
border: 5px solid blue;
left: -200px; /* to samo co szerokość, ale z minusem */
transition: left 0.4s ease-out;
}
#panel:after {
content: url('http://lorempixel.com/output/abstract-q-c-30-30-6.jpg'); /* obrazek "uchwytu" */
position: absolute;
right: -35px; /* tym ustawiasz pozycję "uchwytu" */
top: -5px;
cursor: pointer;
}
#panel:hover {
left: 0;
}