PageSlide - выдвигающаяся панель на jQuery

22/12/2012  скрипты, jQuery

Скрипт Pageslide — это выдвигающиеся панели (слева или справа) для представления дополнительной информации, которая может быть востребована посетителем при просмотре основного контента, например — справочная информация, меню или оглавление документа.

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

Добавляем стили оформления, где width — ширина панели.

#pageslide
{
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
width: 260px;
padding: 20px;
background-color: #333;
color: #FFFFFF;
-webkit-box-shadow: inset 0 0 5px 5px #222;
-moz-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}
#modal
{
display: none;
}
#modal a
{
color: #FFFFFF;
border: none;
}

Вставляем код ссылки вызова панели в нужное место страницы.

<a href="#modal" class="second">Ссылка вызова панели</a>

Вставляем код панели. При необходимости установки второго блока, нужно присвоить ему другое имя (например, "modal2") и прописать стиль: #modal2 {display: none;}.

<div id="modal">
<p style="text-align: right;"><a href="javascript:$.pageslide.close()">Закрыть</a></p>
<h2>Заголовок</h2>
<p>Абзац текста</p>
</div>

Подключаем jQuery, скрипт с указанием расположения файла на сайте и скрипт вызова функции, где src="/files/pageslide.min.js"  — путь к скрипту, right — направление смещения страницы.

<script type="text/javascript" src="/files/pageslide.min.js"></script>
<script type="text/javascript">
$(".second").pageslide({ direction: "right", modal: true });
</script>

Пример №1

Пример №2

Скачать скрипт архивом

Меню:

 

  • Пункт меню
  • Пункт меню
  • Пункт меню
  • Пункт меню
  • Пункт меню
  • Пункт меню
  • Пункт меню

 

Свернуть меню

Апсолямов Михаил
Автор — Михаил Апсолямов
Создаю и продвигаю сайты с 2010 года. Провожу аудиты, настраиваю контекстную рекламу. Подробнее об услугах.
наверх