Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Интернет адрес форумаавтор Mierena Вчера в 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
» совет админам
автор лексей2222 Август 14th 2024, 08:34
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
» Как убрать подпись о редактировании записи
автор Фея Май 9th 2024, 21:11
» Пакеты Forum 2x2
автор Dana Domirani Май 6th 2024, 14:11
» Как поменять вид нумерации страниц тем?
автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
Разворачивающееся меню
Страница 1 из 1
Разворачивающееся меню
Как это будет выглядеть (в зависимости от оформления):
![Разворачивающееся меню 655364](http://savepic.net/655364.jpg)
![Разворачивающееся меню 697230](http://savepic.net/697230.jpg)
Вместо текстовых можно сделать графические кнопки.
Для BB2 и Pun.
Проверьте, чтобы в Па > Оформление > Цвета > Каскадная таблица стилей CSS была отключена функция "Оптимизировать CSS"!
1. Создаете новый файл в ПА > Модули > Управление JS (см. тему https://help.forum2x2.ru/t18896-topic)
В шаблоне overall_header (Верхняя часть страницы) после тега <div id="page-body"> добавляете скрипт самого меню:
Каждый фрагмент - это заголовок кнопки и ссылки в разворачивающемся меню. Замените их на свои (вместо "Кнопка 1" подставьте название кнопки, вместо "#" подставьте ссылку, вместо "Заголовок 1-1" и пр. - название ссылки.
Если по задумке одна из кнопок меню должна сразу отсылать на какую-либо страницу, а не разворачивать дополнительную панель, тогда не ее месте поставьте не полный код
2. В CSS добавляете настройки для всех элементов меню:
Если вместо текстовых названий кнопок вы захотите использовать графические, тогда:
1) Замените в коде меню строки
2) Замените в CSS фрагмент
От наличия шаблонов код не зависит, ставится на любой движок.
![Разворачивающееся меню 672787](http://savepic.net/672787.jpg)
Все настройки CSS одинаковые. Единственное, что надо добавить в скрипт для BB3 и IPB - это перенос меню под основную навигацию.
Т.е для BB3 скрипт будет выглядеть так
Для IPB
На двух этих движках код меню надо ставить в виджеты, которые установлены и на главной странице, и на портале!
![Разворачивающееся меню 655364](http://savepic.net/655364.jpg)
![Разворачивающееся меню 697230](http://savepic.net/697230.jpg)
Вместо текстовых можно сделать графические кнопки.
Для BB2 и Pun.
Проверьте, чтобы в Па > Оформление > Цвета > Каскадная таблица стилей CSS была отключена функция "Оптимизировать CSS"!
1. Создаете новый файл в ПА > Модули > Управление JS (см. тему https://help.forum2x2.ru/t18896-topic)
- Код:
jQuery(document).ready(function(){
jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
return false
});
});
В шаблоне overall_header (Верхняя часть страницы) после тега <div id="page-body"> добавляете скрипт самого меню:
- Код:
<div id="twomenu">
<div class="titl_link">
<a href="#" class="upp">Кнопка 1</a>
<div class="slide_link">
<a href="#">Заголовок 1-1</a>
<a href="#">Заголовок 1-2</a>
<a href="#">Заголовок 1-3</a>
</div></div>
<div class="titl_link">
<a href="#" class="upp">Кнопка 2</a>
<div class="slide_link">
<a href="#">Заголовок 2-1</a>
<a href="#">Заголовок 2-2</a>
<a href="#">Заголовок 2-3</a>
</div></div>
<div class="titl_link">
<a href="#" class="upp">Кнопка 3</a>
<div class="slide_link">
<a href="#">Заголовок 3-1</a>
<a href="#">Заголовок 3-2</a>
<a href="#">Заголовок 3-3</a>
</div></div>
</div>
Каждый фрагмент - это заголовок кнопки и ссылки в разворачивающемся меню. Замените их на свои (вместо "Кнопка 1" подставьте название кнопки, вместо "#" подставьте ссылку, вместо "Заголовок 1-1" и пр. - название ссылки.
<div class="titl_link">
<a href="#" class="upp">Кнопка 1</a>
<div class="slide_link">
<a href="#">Заголовок 1-1</a>
<a href="#">Заголовок 1-2</a>
<a href="#">Заголовок 1-3</a>
</div></div>
- "Пример":
- Код:
<div class="titl_link">
<a href="#" class="upp">Форумы 2x2</a>
<div class="slide_link">
<a href="http://www.forum2x2.ru/ru/create-forum/terms-of-service.htm">Условия</a>
<a href="http://help.forum2x2.ru/forum-f9/">Сайт Hitskin.com</a>
<a href="http://help.forum2x2.ru/forum-f1/tema-t9502.htm#87538">Полезные ссылки</a>
<a href="http://help.forum2x2.ru/t15995-topic">Обновления</a>
<a href="http://help.forum2x2.ru/t16514-topic">Эта тема</a>
</div></div>
![Разворачивающееся меню Attention2](https://illiweb.com/fa/fdf/ti/attention2.png)
- Код:
<div class="titl_link">
<a href="#" class="upp">Кнопка</a>
<div class="slide_link">
<a href="#">Заголовок</a>
<a href="#">Заголовок</a>
<a href="#">Заголовок</a>
</div></div>
- Код:
<div class="titl_link">
<a href="http://здесь прямая ссылка" class="upp2">На 1 тему</a>
</div>
2. В CSS добавляете настройки для всех элементов меню:
- Код:
.titl_link {
display:inline-block;
position: relative;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
z-index: 999;
}
/* Кнопка меню */
.upp, .upp2 {
text-align:center;
background: #fff url("http://illiweb.com/fa/subsilver/back_catg.gif") bottom left;
border: 2px solid #006699;
margin-bottom: 10px;
margin-right: 3px;
padding: 5px;
}
/* Разворачивающаяся панель */
.slide_link {
display: none;
width: 200px;
border: 2px solid #006699;
background-color:#fff;
position: absolute;
z-index: 999;
top: 27px;
}
/* Ссылки на разворачивающейся панели */
.slide_link a {
display: block;
background-color:#eee;
padding: 2px 5px 2px;
margin-bottom: 5px;
}
/* Ссылки на разворачивающейся панели при наведении */
.slide_link a:hover {
background-color: #006699;
color: #fff;
}
![Разворачивающееся меню Attention2](https://illiweb.com/fa/fdf/ti/attention2.png)
1) Замените в коде меню строки
- Код:
<a href="#" class="upp">Кнопка</a>
- Код:
<a href="#" class="upp"><img src="http://i68.servimg.com/u/f68/16/08/40/28/dfg610.png" alt="Кнопка" title="Кнопка" /></a>
2) Замените в CSS фрагмент
- Код:
.upp, .upp2 {
text-align:center;
background: #fff url("http://illiweb.com/fa/subsilver/back_catg.gif") bottom left;
border: 2px solid #006699;
margin-bottom: 10px;
margin-right: 3px;
padding: 5px;
}
- Код:
.upp, .upp2 {
text-align:center;
margin-bottom: 10px;
margin-right: 3px;
}
От наличия шаблонов код не зависит, ставится на любой движок.
![Разворачивающееся меню 672787](http://savepic.net/672787.jpg)
Все настройки CSS одинаковые. Единственное, что надо добавить в скрипт для BB3 и IPB - это перенос меню под основную навигацию.
Т.е для BB3 скрипт будет выглядеть так
- Код:
jQuery(document).ready(function(){
jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
});
jQuery('div#twomenu').insertAfter(jQuery('.headerbar + .navbar ul.linklist'));
});
Для IPB
- Код:
jQuery(document).ready(function(){
jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
});
jQuery('div#twomenu').insertAfter(jQuery('#submenu'));
});
![Разворачивающееся меню Attention2](https://illiweb.com/fa/fdf/ti/attention2.png)
![Разворачивающееся меню Userba12](https://i.servimg.com/u/f37/11/71/42/99/userba12.png)
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
![-](https://illiweb.com/empty.gif)
» Как заменить стандартное меню навигации на разворачивающееся меню?
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
» Разворачивающееся меню
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения