![����������� ������ - Всплывающая панель [все версии] Fdf10](https://i.servimg.com/u/f39/18/45/41/65/fdf10.png)
Форум
Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» ВПНавтор Danny_Marcelo Сегодня в 07:47
» Пропала вкладка "Обработка пользователей"
автор Svet007 Вчера в 07:39
» Как найти администратора?
автор PushPayer Ноябрь 21st 2024, 00:58
» Не корректное отображение картинок
автор VENEFICA. Ноябрь 15th 2024, 14:46
» Не меняется название форума
автор Aviator Ноябрь 14th 2024, 15:40
» Дублируется ссылка на форум в боковом меню
автор Чистый сталкер Октябрь 26th 2024, 21:13
» совет админам
автор лексей2222 Октябрь 23rd 2024, 05:45
» Проблема с гугл из-за Hitskin
автор Вултур Октябрь 21st 2024, 15:43
» [решено]Редактирвоание темы
автор AlexDarkTech Октябрь 13th 2024, 08:14
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
Всплывающая панель [все версии]
Страница 1 из 1
![����������� ������ - Всплывающая панель [все версии] Empty](https://illiweb.com/empty.gif)
Всплывающая панель [все версии]
автор Домовой Июль 9th 2012, 13:41
Всплывающая панель
Красивая всплывающая панель для вашего форума с помощью jquery. Ее функционал можно использовать по разному: для дополнительного меню, правил, можно в ней разместить чат, облако тегов и т.д. Всё зависит от вашей фантазии.
Туториал для ЧЁРНОЙ панели
![����������� ������ - Всплывающая панель [все версии] 2012-018](https://i.servimg.com/u/f40/14/80/95/87/2012-018.jpg)
ПА - Оформление - Шаблоны - Общие настройки
Шаблон overall_header (Верхняя часть страницы)
Перед тегом </head> вставить
После тега <body> добавить код меню
В CSS
*********************************************************************
Туториал для БЕЖЕВОЙ панели
![����������� ������ - Всплывающая панель [все версии] 2012-019](https://i.servimg.com/u/f40/14/80/95/87/2012-019.jpg)
ПА - Оформление - Шаблоны - Общие настройки
Шаблон overall_header (Верхняя часть страницы)
Перед тегом </head> вставить
После тега <body> добавить код меню
В CSS
Красивая всплывающая панель для вашего форума с помощью jquery. Ее функционал можно использовать по разному: для дополнительного меню, правил, можно в ней разместить чат, облако тегов и т.д. Всё зависит от вашей фантазии.
Всплывающая панель для версий [BB2] и [Pun]
Туториал для ЧЁРНОЙ панели
ПА - Оформление - Шаблоны - Общие настройки
Шаблон overall_header (Верхняя часть страницы)
Перед тегом </head> вставить
- Код:
<!-- Выплывающая панель -->
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.patmax.eu/J1/120627192954.js"></script>
<![endif]-->
<!-- Sliding effect -->
<script src="http://www.patmax.eu/J1/120627193037.js" type="text/javascript"></script>
После тега <body> добавить код меню
- Код:
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h2>Заголовок 1 первой колонки</h2>
<p class="grey">Текст первой колонки 1</p>
<h2>Заголовок 2 первой колонки</h2>
<p class="grey">Текст первой колонки 2</p>
</div>
<div class="left">
<h2>Заголовок второй колонки</h2>
<p class="grey">Текст второй колонки </p>
</div>
<div class="left right">
<h2>Заголовок третьей колонки</h2>
<p class="grey">Текст третьей колонки </p>
</div>
</div>
</div>
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#">Открыть панель</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
В CSS
- Код:
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background:url(http://www.snapsnap.ru/i/tabblrl.png) repeat-x 0 0;
height:42px;
position:relative;
top:0;
z-index:999;
}
.tab ul.login {
display:block;
position:relative;
float:right;
clear:right;
height:42px;
width:auto;
line-height:42px;
right:20px;
color:#FFF;
font-size:12px;
font-family:Georgia;
text-align:center;
margin:0;
}
.tab ul.login li.left {
background:url(http://www.snapsnap.ru/i/tabltrt.png) no-repeat left 0;
height:42px;
width:30px;
display:block;
float:left;
margin:0;
padding:0;
}
.tab ul.login li.right {
background:url(http://www.snapsnap.ru/i/tabrszs.png) no-repeat left 0;
height:42px;
width:30px;
display:block;
float:left;
margin:0;
padding:0;
}
.tab ul.login li {
text-align:left;
display:block;
float:left;
height:42px;
background:url(http://www.snapsnap.ru/i/tabmbvb.png) repeat-x 0 0;
padding:0 6px;
}
.tab ul.login li a {
color:#15ADFF;
}
.tab ul.login li a:hover {
color:white;
}
.tab .sep {color:#414141}
.tab a.open,.tab a.close {
height:20px;
line-height:20px !important;
padding-left:30px !important;
cursor:pointer;
display:block;
width:100px;
position:relative;
top:13px;
}
.tab a.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left 0;}
.tab a.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left 0;}
.tab a:hover.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left -19px;}
.tab a:hover.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
position: fixed;
top:0;
width:100%;
z-index:999;
text-align:center;
margin-left:auto;
margin-right:auto;
}
#panel {
width:100%;
height:auto;
color:#999;
background:#272727;
overflow:hidden;
position:relative;
z-index:3;
display:none;
}
#panel h1 {
font-size:1.6em;
color:#FFF;
margin:0;
padding:5px 0 10px;
}
#panel h2 {
font-size:1.2em;
color:#FFF;
margin:0;
padding:10px 0 5px;
}
#panel p {
margin:5px 0;
padding:0;
}
#panel a {
text-decoration:none;
color:#15ADFF;
}
#panel a:hover {
color:white;
}
#panel a-lost-pwd {
display:block;
float:left;
}
#panel .content {
width:960px;
padding-top:15px;
text-align:left;
font-size:1em;
margin:0 auto;
}
#panel .content .left {
width:280px;
float:left;
border-left:1px solid #333;
padding:0 15px;
}
#panel .content .right {
border-right:1px solid #333;
}
#panel .content form {
margin:0 0 10px 0;
}
#panel .content label {
float:left;
padding-top:8px;
clear:both;
width:280px;
display:block;
}
#panel .content input.field {
border:1px #1A1A1A solid;
background:#414141;
margin-right:5px;
margin-top:4px;
width:200px;
color:#FFF;
height:16px;
}
#panel .content input:focus.field {
background:#545454;
}
*********************************************************************
Туториал для БЕЖЕВОЙ панели
ПА - Оформление - Шаблоны - Общие настройки
Шаблон overall_header (Верхняя часть страницы)
Перед тегом </head> вставить
- Код:
<!-- Выплывающая панель -->
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.patmax.eu/J1/120627192954.js"></script>
<![endif]-->
<!-- Sliding effect -->
<script src="http://www.patmax.eu/J1/120627193037.js" type="text/javascript"></script>
После тега <body> добавить код меню
- Код:
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h2>Заголовок 1 первой колонки</h2>
<p class="grey">Текст первой колонки 1</p>
<h2>Заголовок 2 первой колонки</h2>
<p class="grey">Текст первой колонки 2</p>
</div>
<div class="left">
<h2>Заголовок второй колонки</h2>
<p class="grey">Текст второй колонки </p>
</div>
<div class="left right">
<h2>Заголовок третьей колонки</h2>
<p class="grey">Текст третьей колонки </p>
</div>
</div>
</div>
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#">Открыть панель</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
В CSS
- Код:
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Полоса под полем панели */
.tab {
border-bottom: solid 4px #FED26E;
}
/* кнопка открытия панели */
.tab ul.login {
height:30px;
width:150px;
background:url(http://www.snapsnap.ru/i/15030.png);
background-repeat:no-repeat;
display:block;
position:relative;
float:right;
clear:right;
line-height:30px;
right:20px;
font-size:14px;
font-family:Georgia;
text-align:center;
margin-top:4px;
}
.tab ul.login li {
text-align:left;
display:block;
float:left;
padding:0 6px;
}
/* цвет текста на кнопке */
.tab ul.login li a {
color:#804804;
}
.tab ul.login li a:hover {
color:#AC8E25;
}
.tab .sep {color:#414141}
/* картинки + - на кнопке */
.tab a.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left 0;}
.tab a.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left 0;}
.tab a:hover.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left -19px;}
.tab a:hover.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left -19px;}
.tab a.open,.tab a.close {
height:20px;
line-height:20px !important;
padding-left:25px !important;
cursor:pointer;
display:block;
width:120px;
position:relative;
top:5px;
}
/* выплывающая панель */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
position: fixed; /* фиксированное положение панели */
top:28px; /* отступ от верха */
width:100%; /* ширина */
z-index:999;
text-align:center;
margin-left:auto;
margin-right:auto;
}
/* поле панели */
#panel {
width:100%; /* ширина */
height:auto; /* высота */
color:#291000; /* цвет текста */
background:#FFFFF2; /* фон панели */
overflow:hidden;
position:relative;
z-index:3;
display:none;
}
/* заголовок контента */
#panel h1 {
font-size:1.6em; /* размер заголовка */
color:#5A2F13; /* цвет заголовка */
margin:0;
padding:5px 0 5px;
}
/* подзаголовок контента */
#panel h2 {
font-size:1.2em; /* размер текста */
color:#5A2F13; /* цвет текста */
margin:0;
padding:5px 0 5px;
}
#panel p {
margin:5px 0;
padding:0;
}
/* цвет ссылок в панели */
#panel a {
text-decoration:none;
color:#804804;
}
/* цвет ссылок в панели при наведении курсора */
#panel a:hover {
color:#AC8E25;
}
#panel a-lost-pwd {
display:block;
float:left;
}
/* поле контента в панели */
#panel .content {
width:960px;
padding-top:15px;
text-align:left;
font-size:1em;
margin:0 auto;
}
/* колонка */
#panel .content .left {
width:280px; /* ширина */
float:left;
border-left:1px solid #333; /* разделительная линия слева */
padding:0 15px; /* отступ текста */
}
#panel .content .right {
border-right:1px solid #333; /* разделительная линия справа */
}
#panel .content form {
margin:0 0 10px 0;
}
#panel .content label {
float:left;
padding-top:8px;
clear:both;
width:280px;
display:block;
}
#panel .content input.field {
border:1px #1A1A1A solid;
background:#414141;
margin-right:5px;
margin-top:4px;
width:200px;
color:#FFF;
height:16px;
}
#panel .content input:focus.field {
background:#545454;
}
Домовой-
-
Сообщения : 6801
Возраст : 101
Регистрация : 2010-01-30
Благодарности : 3243
Всплывающая панель [BB3] и [IPB]
автор Домовой Сентябрь 29th 2012, 14:34
Всплывающая панель для версий [BB3] и [IPB]
Создайте персональный виджет
Имя виджета : Всплывающая панель
Использовать стандартный шаблон : НЕТ
Название виджета : (это поле не заполняем)
Содержание виджета * :
- Код:
<!-- Выплывающая панель -->
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.patmax.eu/J1/120627192954.js"></script>
<![endif]-->
<!-- Sliding effect -->
<script src="http://www.patmax.eu/J1/120627193037.js" type="text/javascript"></script>
<div id="toppanel" style="position:fixed;right:0px;top:0px;">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h2>Заголовок 1 первой колонки</h2>
<p class="grey">Текст первой колонки 1</p>
<h2>Заголовок 2 первой колонки</h2>
<p class="grey">Текст первой колонки 2</p>
</div>
<div class="left">
<h2>Заголовок второй колонки</h2>
<p class="grey">Текст второй колонки </p>
</div>
<div class="left right">
<h2>Заголовок третьей колонки</h2>
<p class="grey">Текст третьей колонки </p>
</div>
</div>
</div> <div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#">Открыть панель</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
Перетащите созданный виджет в правую или левую колонку, как вам удобней, сохраните.
В CSS вставьте
- Код:
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background:url(http://www.snapsnap.ru/i/tabblrl.png) repeat-x 0 0;
height:42px;
position:relative;
top:0;
z-index:999;
}
.tab ul.login {
display:block;
position:relative;
float:right;
clear:right;
height:42px;
width:auto;
line-height:42px;
right:20px;
color:#FFF;
font-size:12px;
font-family:Georgia;
text-align:center;
margin:0;
}
.tab ul.login li.left {
background:url(http://www.snapsnap.ru/i/tabltrt.png) no-repeat left 0;
height:42px;
width:30px;
display:block;
float:left;
margin:0;
padding:0;
}
.tab ul.login li.right {
background:url(http://www.snapsnap.ru/i/tabrszs.png) no-repeat left 0;
height:42px;
width:30px;
display:block;
float:left;
margin:0;
padding:0;
}
.tab ul.login li {
text-align:left;
display:block;
float:left;
height:42px;
background:url(http://www.snapsnap.ru/i/tabmbvb.png) repeat-x 0 0;
padding:0 6px;
}
.tab ul.login li a {
color:#15ADFF;
}
.tab ul.login li a:hover {
color:white;
}
.tab .sep {color:#414141}
.tab a.open,.tab a.close {
height:20px;
line-height:20px !important;
padding-left:30px !important;
cursor:pointer;
display:block;
width:100px;
position:relative;
top:13px;
}
.tab a.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left 0;}
.tab a.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left 0;}
.tab a:hover.open {background:url(http://www.snapsnap.ru/i/btopenoeo.png) no-repeat left -19px;}
.tab a:hover.close {background:url(http://www.snapsnap.ru/i/btclosedhd.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
position: fixed;
top:0;
width:100%;
z-index:999;
text-align:center;
margin-left:auto;
margin-right:auto;
}
#panel {
width:100%;
height:auto;
color:#999;
background:#272727;
overflow:hidden;
position:relative;
z-index:3;
display:none;
}
#panel h1 {
font-size:1.6em;
color:#FFF;
margin:0;
padding:5px 0 10px;
}
#panel h2 {
font-size:1.2em;
color:#FFF;
margin:0;
padding:10px 0 5px;
}
#panel p {
margin:5px 0;
padding:0;
}
#panel a {
text-decoration:none;
color:#15ADFF;
}
#panel a:hover {
color:white;
}
#panel a-lost-pwd {
display:block;
float:left;
}
#panel .content {
width:960px;
padding-top:15px;
text-align:left;
font-size:1em;
margin:0 auto;
}
#panel .content .left {
width:280px;
float:left;
border-left:1px solid #333;
padding:0 15px;
}
#panel .content .right {
border-right:1px solid #333;
}
#panel .content form {
margin:0 0 10px 0;
}
#panel .content label {
float:left;
padding-top:8px;
clear:both;
width:280px;
display:block;
}
#panel .content input.field {
border:1px #1A1A1A solid;
background:#414141;
margin-right:5px;
margin-top:4px;
width:200px;
color:#FFF;
height:16px;
}
#panel .content input:focus.field {
background:#545454;
}
![����������� ������ - Всплывающая панель [все версии] 2607504m](http://savepic.su/2607504m.jpg)
Домовой-
-
Сообщения : 6801
Возраст : 101
Регистрация : 2010-01-30
Благодарности : 3243
Похожие темы» всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
» Всплывающая панель
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения![����������� ������ - Всплывающая панель [все версии] Fb11](https://i.servimg.com/u/f21/18/21/41/30/fb11.png)
Facebook![����������� ������ - Всплывающая панель [все версии] Pi10](https://i.servimg.com/u/f21/18/21/41/30/pi10.png)
ВКонтакте
