Скрипт блока выдвижной панели Данный блок интересен тем, что в настройках скрипта возможно довольно много изменений. Скрипт позволяет менять положение выдвижного блока (сверху-слева-снизу-справа), размеры самого блока, размеры блока инициации (кнопка выдвижения блока),
выбор инициации - по клику или при наведении, скорость открытия.
Сам скрипт довольно простой.
скачать из архива сайта посмотреть демоСтавится на сайт это украшение достаточно просто.
В корень сайта закачивается папка с двумя скриптами и картинкой panel (в папке ещё есть файл index.html - для примера. его можно не загружать).
Открыть файл "шапки" (overall_header.html либо иной, используемый у вас)
Найти
Вставить перед найденным
Код: Выделить всё
<script type="text/javascript" src="panel/jquery.js"></script>
<script src="panel/jquery.tabslideout.js" type="text/javascript"></script>
<style type="text/css">
.panel {
height:138px;
width: 250px;
background: #FFFFFF;
border: 1px solis #1C1C1;
color:#000000;
}
.sp {padding:20px}
</style>
<script type="text/javascript">
$(function(){
$('.panel').tabSlideOut({ //Класс панели
tabHandle: '.handle', //Класс кнопки
pathToTabImage: 'ваш сайт/panel/tr_right.png', //Путь к изображению кнопки
imageHeight: '30px', //Высота кнопки
imageWidth: '30px', //Ширина кнопки
tabLocation: 'left', //Расположение панели top , right, bottom, left
speed: 300, //Скорость анимации
action: 'click', //Метод показа click, hover (при клике, наведении)
topPos: '35%', //Отступ сверху
fixedPosition: true //false - position: absolute, true - position: fixed (true - position: fixed - закрепляет в одном месте экрана и стоит на месте при прокрутке страницы)
});
});
</script>
Небольшое объяснение
Стиль блока можно вывести и отдельно в ваш .css файл стиля.
Код: Выделить всё
.panel {
height:138px;
width: 250px;
background: #FFFFFF;
border: 1px solis #1C1C1;
color:#000000;
}
.sp {padding:20px}Описание функций скрипта, например вот это
//Отступ сверху, на некоторых сайтах будет мешать работе скрипта и его стоит удалить. (бывает нечасто, но бывает)
если у вас уже подключена библиотека jquery, то этот скрипт прописывать не надо:
Код: Выделить всё
<script type="text/javascript" src="panel/jquery.js"></script> Добавить после
<body>Код: Выделить всё
<div class="panel">
<div class="sp">
<a class="handle" href="#"></a>
<span>
это типа потайной карман<br /><br />
может для чего сгодится<br /><br />
ла-ла<br /><br />
ла-ла-ла?
</span>
</div>
</div>Где
это вывод картинки открытия, а сама ваша информация размещается между тэгами
Вроде бы всё. Успехов в установке. Кнопочку открытия можете нарисовать свою под стиль сайта. (не забудьте только прописать и её размеры в скрипте).
