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

Как сделать всплывающую панель справа?

автор Домовой Ноябрь 7th 2012, 08:14

Выплывающая боковая панель

Подходит для версий форума [punBB][phpBB2]

1. ПА - Модули - HTML & JAVASCRIPT - Управление кодами Javascript
Создать новый Javascript
Название * : Боковая панель
Расположение : На всех страницах
Код Javascript * :

Код:: $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', /*класс элемента вкладки*/ pathToTabImage: 'http://www.snapsnap.ru/i/cnccnc.png', /*путь к изображению "обязательно"*/ imageHeight: '100px', /*высота изображения "обязательно"*/ imageWidth: '25px', /*ширина изображения "обязательно"*/ tabLocation: 'right', /*сторона на которой будет вкладка top, right, bottom, или left*/ speed: 500, /*скорость анимации*/ action: 'click', /*опции=:'click'или'hover', анимация при нажатии или наведении*/ topPos: '40px', /*расположение от верхнего края/ использовать если tabLocation = left или right*/ leftPos: '20px', /*расположение от левого края/ использовать если tabLocation = bottom или top*/ fixedPosition: true /*опции: false сделает данную вкладку прокручивающуюся при скролле*/ }); });

Сохраните.

2. ПА - Оформление - Шаблоны - Общие настройки
Откройте шаблон overall_footer_end (Конец нижней части страницы), в самый низ перед </body>вставьте

Код::  <script type="text/javascript" src="http://yourjavascript.com/92551122121/jquery.tabslideout.v1.2.js"></script>  <div class="slide-out-div"> <a class="handle"></a> Здесь ваше содержимое блока </div>

Сохранить и опубликовать шаблон.

3. В CSS вставьте коды оформления блока

Код:: /*оформление выдвигающегося поля*/ .slide-out-div { width:100px; /* ширина */ height:100px !important; /* высота */ background-color:#FFFFF2; /* фон */ border:1px solid #E8C15D; /* рамка */ padding:12px; /* отступ содержимого от границ поля */ line-height: 1.6em; } /* оформление ссылок в панели */ .slide-out-div a { font-family:Georgia; /* шрифт */ font-size:13px; /* размер текста */ color:#804804; /* цвет ссылок */ line-height: 1.6em; } /* цвет ссылок в панели при наведении курсора */ .slide-out-div a:hover { color:#AC8E25; }