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

22 декабря 2012  5281  скрипты, jQuery

 

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

Добавляем стили оформления, где 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>

Подключаем скрипт с указанием расположения файла на сайте и скрипт вызова функции, где 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

Источник - http://srobbin.com/

Скачать Srobbin-jquery-pageslide-v2.0 архивом

Меню:

 

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

 

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

 

Комментарии для сайта Cackle
наверх