<!-- JampPanel -Cлево -->
<style>

#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:0px solid #FE2323;
background-color: #F0F0F0;

}
#JampPanel {opacity:0.86;
 position:fixed;z-index:1200;
 height:190px;top:8px;left:0;margin-left:-202px;
 background: transparent url(http://uploads.ru/i/S/z/t/Sztn3.png) 202px 2px no-repeat;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
 width:230px;
}
#JampPanel .container{
 padding:12px;
 height:400px;
 width:100%;margin:-1px 0 0 -58px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
 position:absolute;
 height:190px;width:14px;
 background-color: transparent;
 margin:-12px 0 0 234px;
}
#Klicalka{ /*прикрывает "УХО"*/
 position:absolute;
 height:190px;width:44px;
 margin:-12px 0 0 234px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
    <div id=Klicalka></div>
Ваш контент
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
(function() { 
var NumClick = 0;
$('#Klicalka').click(function() { 
 NumClick=(NumClick+1)%2;
 if(NumClick){
   $('#JampPanel').animate({'margin-left':'45px'},200,'swing');
 } else $('#JampPanel').animate({'margin-left':'-202px'},200,'swing');
});
}());
});
</script>
<!--End//JampPanel-->




<link href='http://fonts.googleapis.com/css?family=Play&subset=latin,greek,cyrillic,cyrillic-ext,latin-ext,greek-ext' rel='stylesheet' type='text/css'>