Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио. Лично я использовал ее на сайте «Завод 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;
}
Вот собственно и всё!