PageSlide - выдвигающаяся панель на 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>
Скачать скрипт архивом
Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.
Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее