Форум русской поддержки Joomla!® CMS
04.12.2016, 01:49:22 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Много уровневое выпадающие меню

 (Прочитано 8726 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« : 02.08.2014, 19:09:44 »

Joomla! 3.3.3 шаблон protostar.
Нужно создать 3-4 многоуровневое выпадающие меню. Одноуровневое создается без проблем.
При создании второго уровня подпункт появляется в менеджере меню.
В модуле меню выставил начальный уровень 1 последний 4. Но на сайте ничего не отображается сайт делаю на локальном компе.
В чем проблема, может я где какую настройку не включил в админке или по любому на в файле CSS изменения вносить?
Посмотрел эту тему, http://joomlaforum.ru/index.php/topic,163850.0.html
но у меня всё по другому, а я в коде совсем не силен.
На всякий случай выложил во вложениях файл CSS, может там и надо "пару строк" добавить. что бы многоуровневое меню появилось.

* template.txt (154.38 Кб - загружено 71 раз.)
« Последнее редактирование: 02.08.2014, 19:30:48 от Se » Записан
sergoguga
Живу я здесь
******

Репутация: +70/-8
Offline Offline

Пол: Мужской
Сообщений: 990


www.mpbox.ru


« Ответ #1 : 02.08.2014, 23:14:37 »

поставьте квикстарт и там все разжевано)))

название стиля в модуле меню вписывали?
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #2 : 03.08.2014, 12:48:35 »

Поставил два варианта демо версий сайтов  которые предполагаются при установки Joomla! 3.3.3, но там вообще нет выпадающего меню.
Значит надо искать такие шаблоны и что бы было именно многоуровневое выпадающее меню, но тогда уже будет соответственно другой шаблон, а я сейчас делаю на protostar, который включен в дистрибутив

Нет, в название стиля в модуле ничего не вписывал.
Сейчас в настройках модуля в дополнительных параметрах, в стиле модуля, стоит унаследовано.
Попробовал предложенные варианты из списка, но меняется только внешний вид меню
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #3 : 03.08.2014, 13:08:33 »

В настройках модуля галочка есть "показывать подпункты меню"...
Да обзначена кнопка "показывать подпункты меню"

Во вложениях
1) Настройки модуля верхнего меню
2)Пункты верхнего меню
3)Что у меня получается на сайте (то есть подпункт Азия не отображается)
4) Как я хочу что бы было

В первом посте выложил файл CSS


* sait4.jpg (113.18 Кб, 1339x607 - просмотрено 961 раз.)

* sait5.jpg (138.83 Кб, 1340x510 - просмотрено 720 раз.)

* sait2.jpg (62.64 Кб, 739x470 - просмотрено 717 раз.)

* sait3.jpg (50.21 Кб, 636x334 - просмотрено 793 раз.)
Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #4 : 03.08.2014, 14:15:51 »

покажи скрин доп.параметров .  
Суффикс класса меню ->  nav-pills
Суффикс CSS-класса модуля -> _menu
Последний уровень- Все
Нормально работает выпадающее горизонтальное меню, из коробки Joomla 3.3
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #5 : 03.08.2014, 17:06:29 »

покажи скрин доп.параметров .  
Суффикс класса меню ->  nav-pills
Суффикс CSS-класса модуля -> _menu
Последний уровень- Все
Нормально работает выпадающее горизонтальное меню, из коробки Joomla 3.3

Выпадающие меню работает нормально но только на один уровень.
В предыдущим посте во вложениях я показал ка у меня работает и как мне надо (что бы было 3-4 уровневое выпадение)
Добавил Суффикс CSS-класса модуля -> _menu, но не заметил, что бы это на чем-то сказалось

Интересно такое меню в стандартном виде работает на много уровневое выпадение или твыпадение работает только на 1 уровень. Может у меня какой глюк, я бы тогда на крайняк Joomla бы переставил.


* sait6.jpg (92.18 Кб, 1342x658 - просмотрено 476 раз.)
« Последнее редактирование: 03.08.2014, 17:18:36 от Se » Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #6 : 03.08.2014, 17:17:37 »

del
« Последнее редактирование: 03.08.2014, 18:19:40 от draff » Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #7 : 03.08.2014, 17:32:36 »

Вот смотри настройки по дефолту

В том виде как показано в последнем скрине и у меня работает а на надо что бы было многоуровневое

1 скрин - пункты и подпункты верхнего меню. Из меню "Путешествия" должно выпадать "Путешествия Сергей"-это выпадает. Из Меню "Путешествия Сергей" должно выпадать "Азия" а это меню уже не появляется.

2 скрин - какое меню выпадает у меня. "Путешествия Сергей" и "Путешествия Михаил". А из меню "Путешествия Сергей" должно еще выпадать меню "Азия" а этого не происходит.

3 скрин - как бы я хотел, что бы было


* sait5.jpg (160 Кб, 1341x653 - просмотрено 394 раз.)

* sait2.jpg (74.62 Кб, 1341x462 - просмотрено 373 раз.)

* sait3.jpg (50.21 Кб, 636x334 - просмотрено 378 раз.)
« Последнее редактирование: 03.08.2014, 18:18:25 от Se » Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #8 : 03.08.2014, 20:06:10 »

Подправил немного код, выводится 3 пункт в сторону, но еще нужно JavaScript для задержки


* template.zip (23.3 Кб - загружено 82 раз.)
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #9 : 04.08.2014, 19:10:48 »

Подправил немного код, выводится 3 пункт в сторону, но еще нужно JavaScript для задержки

Спасибо большое!
Моя проблема почти решена), мне нужно что бы еще один пункт выводился в сторону.
Сейчас уже есть:  Путешествия - Путешествия Сергей - Азия
Нужно:  Путешествия - Путешествия Сергей - Азия - Таиланд,    то есть что бы из пункта Азия выпадал пункт Таиланд.
Сейчас я его создал, но он не выпадает.

Мог бы показать какой код ты вставил CSS что бы я хотя бы имел представление об изменениях).
« Последнее редактирование: 04.08.2014, 19:35:00 от Se » Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #10 : 04.08.2014, 19:41:28 »

Метку в комментарии- /*menu*/  я поставил для кого ))
Код:
.navigation .nav-child,.navigation .nav-child  ul li ul li
А это для вывода hover
Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child  {
position: absolute;
top: 33px;
left: 110px;}
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #11 : 05.08.2014, 19:21:38 »

Метку в комментарии- /*menu*/  я поставил для кого ))
Код:
.navigation .nav-child,.navigation .nav-child  ul li ul li
А это для вывода hover
Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child  {
position: absolute;
top: 33px;
left: 110px;}

Когда много не углядел)

Ты наверное забыл указать еще важное изменение которое внес, именно за счет него добавляются пункты меню
Код:

.navigation .nav > li:hover > .nav-child ,
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child , # добавляется пункт меню
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child> li:hover > .nav-child , # добавляется еще пункт меню#
 с помощью этой строки я добавил еще один нужный мне пункт меню, который выпадает из пункта Азия.

Но как всегда появилась еще проблема высота этого пункта очень мала.


Код:

.navigation .nav-child a {
display: block;
padding: 3px 20px;
clear: both;
font-size: 13px;
font-weight: normal;
line-height: 18px; # высота пункта меню# но данный параметр влияет на все пункты, кроме последнего добавленного мной (см. вложения)
color: #333;
white-space: nowrap;
}


Как же можно увеличить высоту последнего пункта выпадающего меню?


* sait7.jpg (116.02 Кб, 908x657 - просмотрено 359 раз.)
Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #12 : 05.08.2014, 20:08:33 »

А сравнить мое и с дистра
я добавил описание для вложенного списка
Было
Код:
.navigation .nav-child
а с добавлением
Код:
.navigation .nav-child, .navigation .nav-child  ul li ul li
а дальше пробуй
Код:
.navigation .nav-child,
.navigation .nav-child  ul li ul li,
.navigation .nav-child  ul li ul li ul li
п.с.
изменил и работает
Код:
/*menu*/
.navigation .nav-child,.navigation .nav-child  ul li ul li ul li {
« Последнее редактирование: 08.08.2014, 13:47:42 от draff » Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #13 : 06.08.2014, 18:32:47 »

А сравнить мое и с дистра
я добавил описание для вложенного списка
Было
Код:
.navigation .nav-child
а с добавлением
Код:
.navigation .nav-child, .navigation .nav-child  ul li ul li
а дальше пробуй
Код:
.navigation .nav-child,
.navigation .nav-child  ul li ul li,
.navigation .nav-child  ul li ul li ul li
Я по сути только и сравнивал твое и  с дитсра, так как у меня знания в CSS на уровне азбуки и то на половину.
Однажды создал сайт http://туризм-фотографии.рф/ по видео курсам, а теперь пытаюсь перенести его на 3 Joomla.
Первое что я попробовал это удалить ul li ul li  отсюда .navigation .nav-child  ul li ul li, что бы посмотреть на что это влияет. Вообще никаких изменений не произошло. Но сейчас сделал как советовал .navigation .nav-child  ul li ul li ul li все работает.

Теперь стоит такой вопрос. Как сделать что бы выпадающий список второго уровня выпадал вправо, а не вниз. То есть из меню "Путешествия" вниз должно выпадать меню "Путешествия Сергей" и "Путешествия Михаил". Дальше из меню "Путешествия Сергей" вправо должно выпадать Меню "Азия", "Африка" и т.д. А из меню "Азия" еще раз вправо должно выпадать меню "Таиланд" и т.д.
Посмотрел эту статью http://dbmast.ru/sozdaem-mnogourovnevoe-gorizontalnoe-menyu-s-effektom-animacii-css3 , но так и не понял как это прописывается
А у меня получается такая фигня см. вложения

Вложения
1) То что у меня получилось  -  меню Таиланд, которое открывается из меню Азия появляется под меню Африка, а там будут еще пункты континентов
2 и 3) Как мне нужно. Последний скрин именно так как мне нужно


* sait8.jpg (107.47 Кб, 919x635 - просмотрено 224 раз.)

* sait9.jpg (66.51 Кб, 697x327 - просмотрено 270 раз.)

* sait3.jpg (50.21 Кб, 636x334 - просмотрено 225 раз.)
Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #14 : 07.08.2014, 08:18:02 »

Цитировать
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child> li:hover > .nav-child , # добавляется еще пункт меню#
 с помощью этой строки я добавил еще один нужный мне пункт меню, который выпадает из пункта Азия.
Регулировка позиции пункта меню, при наведении курсора
Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child> li:hover > .nav-child {
position: absolute;
top: 33px;
left: 210px;}
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #15 : 07.08.2014, 19:27:03 »

Регулировка позиции пункта меню, при наведении курсора
Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child> li:hover > .nav-child {
position: absolute;
top: 33px;
left: 210px;}

Я правил этот код но думал, что он влияет на все выпадающие менюшки

Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child   {
position: absolute;
top: 23px;
left: 145px;
}
Почему-то сразу не догадался что для каждого выпадающего пункта нужен свой код, то есть для следующего пункта выпадающего меню уже будет

Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child> li:hover > .nav-child  {
position: absolute;
top: 23px;
left: 135px;
}

Попробовал разобраться с задержкой, но пока не получилось. Если о CSS я хотя бы представление имею, то в javascript вообще ноль.
Попробовал вставить код в CSS файл, но результата нет

Код:
<script type="text/javascript">
$(document).ready(function(){
$("li:hover").cssmenu({
animation: {height:'show'},
delay: 12000             
});
});
</script>
Код посмотрел здесь http://searchengines.guru/showthread.php?t=805402
Что не так?
Возможно задержку сделать средствами CSS или обязательно javascript нужен?

Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #16 : 07.08.2014, 19:46:07 »

JavaScript линкуется отдельно, не в CSS . Я по JavaScript не очень, только в плане разработки сайта клиенту.
твой код должен влиять на поведение свойства display
http://jquery-docs.ru/effects/animate/
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #17 : 09.08.2014, 18:37:39 »

Думал, что основные вопросы по CSS  с меню решил. Оказывается нет(.

То есть в выпадающем меню есть например два пункта "Путешествия Сергей" и "Путешествия Михаил". При наведении мышки на пункт "Путешествия Сергей", следующее выпадающие меню отображается где надо. А вот если навести на на пункт "Путешествия Михаил", то выпадающие меню для этого пункта отображается там же где и для пункта "Путешествия Сергей".  См. вложения
То есть ситуация такова

Код:
.navigation .nav > li:hover > .nav-child> li:hover > .nav-child   {
position: absolute;
top: 23px;
left: 145px;
}

Этим кодом мы настроили "Регулировка позиции пункта меню, при наведении курсора", но получается так что это для всего выпадающего меню. А если в этом меню будет десять пунктов, то при наведении на один из пунктов, следующие впадающие меню будет появляться, всегда в одном и том же месте, подходящим только для одного пункта.
Как производится регулировка позиции для отдельного пункта меню, при наведении курсора?

P.S. Вроде все правильно понял или опять не до конца в тему въехал.


* sait10.jpg (104.81 Кб, 733x468 - просмотрено 263 раз.)
« Последнее редактирование: 09.08.2014, 18:45:00 от Se » Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #18 : 10.08.2014, 09:34:49 »

Ставь временно/постоянно готовое решение - chinch menu
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/21961
Не будет выпадать подпункты, отключи в настройках модуля загрузку jquery
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #19 : 10.08.2014, 19:58:38 »

Ставь временно/постоянно готовое решение - chinch menu
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/21961
Не будет выпадать подпункты, отключи в настройках модуля загрузку jquery

Готовое решение для меня было бы хорошим вариантом.
Блин не выпадает меню.
Сначала в настройке модуля  Cinch Menu, указал свое уже созданное впадающие меню в Select a Menu.
Всё подцепилось но выпадение не сработало.
Думаю ладно, создам с нуля и параллельно делал меню в стандартном модуле, что бы смотреть будет ли в нем выпадения.
В стандартном модуле всё ок, а вот в Cinch Menu выпадения не происходит.
Попробовал отключить Include jQuery Library в дополнительных параметрах, но тоже не помогло.
А у тебя выпадение работает? Какая версия Joomla?
У меня Joomla! 3.3.3 может на более ранних все работает, пока не было времени на ранних версиях попробовать.


* sait11.jpg (91.47 Кб, 772x517 - просмотрено 247 раз.)

* sait12.jpg (66.28 Кб, 828x508 - просмотрено 222 раз.)
« Последнее редактирование: 10.08.2014, 20:18:27 от Se » Записан
draff
Практически профи
*******

Репутация: +161/-5
Offline Offline

Пол: Мужской
Сообщений: 2650


step by step


« Ответ #20 : 10.08.2014, 20:16:22 »

Joomla! 3.3.3 .Может еще подправь в файле styles-flyout.php , с 50 строки, у меня выводило ошибки, пришлось править
сначала дал 200px, посмотреть много, дал 100px не меняется.где то кеш.
Код:
#flyout_menu_{$module->id}.msie6 ul,
#flyout_menu_{$module->id}.msie7 ul,
#flyout_menu_{$module->id}.msie8 ul {
width: 100px;
}
#flyout_menu_{$module->id}.horizontal.msie6 .menu-link,
#flyout_menu_{$module->id}.horizontal.msie7 .menu-link,
#flyout_menu_{$module->id}.horizontal.msie8 .menu-link {
width: 100px;
}
#flyout_menu_{$module->id}.horizontal.msie6 > li > .item-wrapper,
#flyout_menu_{$module->id}.horizontal.msie7 > li > .item-wrapper,
#flyout_menu_{$module->id}.horizontal.msie8 > li > .item-wrapper {
width: 100px;
}


* c1.JPG (16.29 Кб, 445x324 - просмотрено 335 раз.)

* c2.JPG (11.82 Кб, 516x168 - просмотрено 264 раз.)
Записан
Se
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 169


« Ответ #21 : 11.08.2014, 16:15:15 »

Спасибо большое!
Всё заработало после изменений в коде, с настройками согласно скриншота и отключенным Include jQuery Library в дополнительных параметрах.
Записан
Porox
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 34


« Ответ #22 : 11.02.2015, 18:40:24 »

Здравствуйте, у меня не много другая проблема с менюшкой : поставил шаблон http://demo.rockettheme.com/live/joomla/osmosis/  - прикольный, в нем есть одна функция- при опускания ниже с права появляется менюшка, подскажите если знаете, как сделать так чтоб она постоянно там была?
Записан
isbhornen
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #23 : 12.05.2015, 14:35:51 »

Ох, ребята, спасибо большое! Делал многоуровневое меню по вашему образу и подобию для стандартного шаблона в Joomla! 3.3.3 - "RSmetro". Всё получилось!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet