Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Выпадающее меню

Предыдущая тема Следующая тема Перейти вниз

Выпадающее меню

Сообщение автор френк в Пт 18 Мар - 5:31

Подскажите чайнику! Как создать выпадающее вертикальное меню?

Только покажите где что писать и куда это все вставлять yes

Спасибо заранее =)


Последний раз редактировалось: френк (Вс 20 Мар - 2:57), всего редактировалось 1 раз(а)

френк
Новичок

Мужчина

Сообщения : 9
Возраст : 23
Место обитания : Киев
Настроение : Замечательное
Регистрация : 2010-11-15
Благодарности : 0

Без предупреждений

http://souleater.forumy2x2.com

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор Dana Domirani в Пт 18 Мар - 6:00

Такое подойдет? http://help.forum2x2.ru/t12854-topic#112810



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22085
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-19
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор френк в Пт 18 Мар - 21:39

Мне бы хотелось сделать его под меню. Как здесь

http://fentesi.gip-gip.ru/

Прошу прощения у авторов форума =)

френк
Новичок

Мужчина

Сообщения : 9
Возраст : 23
Место обитания : Киев
Настроение : Замечательное
Регистрация : 2010-11-15
Благодарности : 0

Без предупреждений

http://souleater.forumy2x2.com

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор Dana Domirani в Пт 18 Мар - 22:18

Вообще-то это горизонтальное выпадающее меню. Такое тоже можно.
(Пока ищу тему именно с ним, посмотрите вот такой вариант: http://help.forum2x2.ru/t16444-topic - для интереса)


Последний раз редактировалось: Dana Domirani (Пт 18 Мар - 22:21), всего редактировалось 1 раз(а)



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22085
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-19
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор френк в Пт 18 Мар - 22:20

Простите, проблемы горизонтальными и вертикальными линиями... Спасибо!

френк
Новичок

Мужчина

Сообщения : 9
Возраст : 23
Место обитания : Киев
Настроение : Замечательное
Регистрация : 2010-11-15
Благодарности : 0

Без предупреждений

http://souleater.forumy2x2.com

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор Dana Domirani в Сб 19 Мар - 2:19

Живое демо:
http://calidasa2x2.forum2x2.ru/


Вместо текстовых можно сделать графические кнопки.


Для BB2 и Pun.

Проверьте, чтобы в Па > Оформление > Цвета > Каскадная таблица стилей CSS была отключена функция "Оптимизировать CSS"!

1. В шаблоне overall_header (Верхняя часть страницы) ставите скрипт перед тегом </head>
Код:
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
return false
});

});
//]]>
</script>

После тега <div id="page-body"> добавляете скрипт самого меню:
Код:

<br /><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><br /><br />

Каждый фрагмент - это заголовок кнопки и ссылки в разворачивающемся меню. Замените их на свои (вместо "Кнопка 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>
Кол-во кнопок и ссылок в списке может быть любым - хоть две, хоть десять.

Если по задумке одна из кнопок меню должна сразу отсылать на какую-либо страницу, а не разворачивать дополнительную панель, тогда не ее месте поставьте не полный код
Код:
<div class="titl_link">
<a href="#" class="upp">Кнопка</a>
<div class="slide_link">
<a href="#">Заголовок</a>
<a href="#">Заголовок</a>
<a href="#">Заголовок</a>
</div></div>
а сокращенный, и задайте ей другой класс (но с таким же оформлением, как у всех кнопок; в примере это класс upp2):
Код:
<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;
}
И сохраняете. Все.

Если вместо текстовых названий кнопок вы захотите использовать графические, тогда:
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>
Вместо https://i68.servimg.com/u/f68/16/08/40/28/dfg610.png подставьте ссылки на нужные кнопки, вместо "Кнопка" напишите их названия.

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;
}
и сохраните изменения.




От наличия шаблонов код не зависит, ставится на любой движок.

Все настройки CSS одинаковые. Единственное, что надо добавить в скрипт для BB3 и IPB - это перенос меню под основную навигацию.

Т.е для BB3 скрипт будет выглядеть так
Код:
<script type='text/javascript'>
//<![CDATA[
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'));

});
//]]>
</script>

Для IPB
Код:
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
});

jQuery('div#twomenu').insertAfter(jQuery('#submenu'));

});
//]]>
</script>

На двух этих движках скрипт надо ставить в виджеты, которые установлены и на главной странице, и на портале!



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22085
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-19
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор Домовой в Сб 19 Мар - 3:39

@френк пишет:Мне бы хотелось сделать его под меню. Как здесь

http://fentesi.gip-gip.ru/

Прошу прощения у авторов форума =)
Там установлено вот это

http://help.forum2x2.ru/t15063-topic#126989

Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Место обитания : :яинатибо отсеМ
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор френк в Вс 20 Мар - 2:56

Спасибо! Все получилось!

френк
Новичок

Мужчина

Сообщения : 9
Возраст : 23
Место обитания : Киев
Настроение : Замечательное
Регистрация : 2010-11-15
Благодарности : 0

Без предупреждений

http://souleater.forumy2x2.com

Вернуться к началу Перейти вниз

Re: Выпадающее меню

Сообщение автор Dana Domirani в Вс 20 Мар - 2:59

Пожалуйста!



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22085
Возраст : 32
Место обитания : СПб
Регистрация : 2008-04-19
Благодарности : 8874

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения