Боковая выдвижная панель jQuery
Добавляет на сайт выдвижную панель для любого контента.
http://s3.uploads.ru/ySdjh.jpg

Источник: http://forum.mybb.ru/click.php?http://s … nel-jquery
Платформа: любая

Демо

[html]
    <script language="JavaScript">
    $(document).ready(function() {
    $("div.slide_panel_open").toggle(function() {
    $("div.slide_panel").animate({left:'351px'},500);}, function() {
    $("div.slide_panel").animate({left:0},500);
    });
    });
    </script>
     
    <style>
#slide {
width: 600px;
position: relative;
overflow: hidden;
height: 316px;
background-color: #927557;
margin: 0 auto;
}
.slide_panel {
margin-left: -350px;
padding: 20px;
width: 310px;
height: 236px;
position: relative;
top: 0;
left: 0;
background: #fcfcfc;
}
.slide_panel_open {z-index: +2;
position:absolute;
top: -67px;
left: 350px;
background: url(http://s26.postimg.org/8g3tob3u1/ruchka.png);
background-repeat: no-repeat;
width: 26px;
height: 340px;
}

.bukva {font-size: 12px; color: #000000;}
    </style>

<div id="slide">
    <div class="slide_panel">
    <div class="slide_panel_open"></div>
     
    <div class="bukva">
    <!--  Ваш контент расположен здесь -->
    </div>
    </div>
</div>
[/html]

Код:
    <script language="JavaScript">
    $(document).ready(function() {
    $("div.slide_panel_open").toggle(function() {
    $("div.slide_panel").animate({left:'351px'},500);}, function() {
    $("div.slide_panel").animate({left:0},500);
    });
    }); 
    </script>
     
    <style>
    .slide_panel {z-index: +2;
    margin-left:-351px; 
    padding:20px;
    width: 310px;
    height: 236px;
    position: fixed; 
    top: 110px; 
    left: -1px; 
    border-top: 1px solid #3F724E;
    border-bottom: 1px solid #3F724E;
    background: #F1F1F1;
    }
    .slide_panel_open {z-index: +2;
    position:absolute; 
    top: -67px; 
    left: 350px; 
    background: url(http://s26.postimg.org/8g3tob3u1/ruchka.png);
    background-repeat: no-repeat;
    width: 26px;
    height: 340px;
    } 
     
    .bukva {font-size: 12px; color: #000000;}
    </style>

    <div class="slide_panel">
    <div class="slide_panel_open"></div>
     
    <div class="bukva">
    <!--  Ваш контент расположен здесь -->
    </div>
    </div>