Выдвижная панель на jQuery

jQuery 24.03.2013

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио. Лично я использовал ее на сайте «Завод Tехпромгаз» для открытия опросных листов.

ДЕМО

ИСХОДНИКИ

Слайд-панель, реализована следующим образом, по клику элемент , у нас будет переключаться её класс (между ”active” и ”btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс ”active” изменяет позицию фона.

Подключаем

Между тегами <head> ... </head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
    
     
});
</script>

Вывод панели

Вставляем в место вывода панели

<div id="panel">

</div>
<p class="slide"><a href="#" class="btn-slide">Открыть панель</a></p>

CSS

a:focus {
    outline: none;
}
#panel {
    background: #ccc;
    height: 200px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}

Для своего сайта ( для полного сочетания с дизайном ) я немного изменил стили, возможно вам это может понадобится, гды box-shadow : 0 1px 10px rgba(0, 0, 0, 0.9) inset; в #panel создан с внутренними тенями как описано в статье «Внутренние тени в CSS». Вот мои стили оформления:

CSS

#panel {
    background : url('images/bb-cont.jpg') top center;
    position : relative;
    font-size : 12px;
    color : #cbd1da;
    text-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
    border : #fff solid 1px;
    padding : 20px 20px 20px 20px;
    margin-left : 20px;
    box-shadow : 0 1px 10px rgba(0, 0, 0, 0.9) inset;
    height: 174px;
    width: 534px;
    display: none;
    margin-bottom: -8px;
}
.slide {
    background: url('/images/ob_avtore.png') no-repeat right top;
    padding: 0;
    margin: 0;
}
.btn-slide {
    background: url('/files/panel/images/white-arrow.gif') no-repeat right -50px;
    text-align: center;
    font-size : 12px;
    width: 144px;
    height: 34px;
    padding: 10px 10px 0 0;
    margin-left: 430px;
    display: block;
    font: bold;
    color : #6a6a6a;
    text-shadow : 0 1px 2px #ffffff;
    text-decoration: none;
}
.active {
    background-position: right 10px;
}