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

автор Иванек Январь 4th 2013, 15:02

https://help.forum2x2.ru/t26597-topic
тема
а как сделать чтобы панель всплывала сбоку?

автор Домовой Январь 4th 2013, 17:24

Там и так сбоку. Слева вариант устроит?

автор Иванек Январь 4th 2013, 20:26

Да вполне устроит

автор Домовой Январь 4th 2013, 21:32

Подходит для версий форума [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; /* рамка */ -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 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; }

Сохраните.
Оформление меняйте на свой вкус и цвет.

автор Иванек Январь 4th 2013, 21:40

Тока я все ровно не понял как сделать ее слева?

автор Домовой Январь 4th 2013, 22:08

в скрипте все строчки подписаны что за что отвечает.

Код:: tabLocation: 'right', /*сторона на которой будет вкладка top, right, bottom, или left*/

Меняйте расположение

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

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

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

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

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

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

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