2016
05
Ноя

Выдвигающаяся панель




На многих сайтах вы наверняка уже видели выдвигающуюся панель при прокрутке страницы. Сегодня мы познакомимся с одним из способов создания такой панели на странице сайта.

Выдвигаться панель будет справой стороны при прокрутке страницы. Это простенькая панель, но которая может нести определенную информацию для посетителя.



В архиве, который вы скачаете, имеются файлы стилей и скрипта, которые необходимо подключить к странице в тег head.

<script src="jsliderelatedpages.js" type="text/javascript" language="JavaScript"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> $().ready(function() { //$('#jsrp_related').jsliderelatedposts(); $('#jsrp_related').jsliderelatedposts({ speed: 1000, scrolltrigger: 0.75, smartwidth: true }); }); </script>

На странице между тегами body размещаем саму панель.

<div id="jsrp_related"> <a href="#" id="jsrp_related-close"><img id="close_btn" src="close_button.gif" alt="Close"></a> <h3>Сообщение:</h3> <ul> <li><a href="../../Domovodctvo/Domovodctvo1.html" ><img src="dom_vo.jpg" width="70" height="70" border="0" class="jsrp_thumb" /></a> <a href="../../Domovodctvo/Domovodctvo1.html" rel="bookmark" class="jsrp_title">Домоводство</a></li> <li><a href=../../Photoshop/Photoshop_spisok.html ><img src="photo_blog.jpg" width="70" height="70" border="0" class="jsrp_thumb" /></a> <a href="../../Photoshop/Photoshop_spisok.html" rel="bookmark" class="jsrp_title">Фотошоп</a></li> <li><a href="../../Poleznoe/menu_LESSON.html" ><img src="seo_blog.jpg" width="70" height="70" border="0" class="jsrp_thumb" /></a> <a href="../../Poleznoe/menu_FISHKI.html" rel="bookmark" class="jsrp_title">Интернет</a></li> </ul> </div>

Для изменения скорости, процента прокрутки до появления панели, ширины панели используйте данные из списка.

  • Speed - (1-5) - Скорость анимации (по умолчанию: 1 секунда), медленная анимация - 5 секунд!
  • Scroll Trigger - [55-100%] - процент прокрутки до появления (по умолчанию: 75%),
    1.0 значение - панель не уберётся пока не нажать кнопку закрыть!
  • Smartwidth - [true/false] - Смарт ширина панели


Не забудьте проверить правильность путей подключения стилей и скрипта.

Успехов Вам!