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

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

Модуль меню с dropdown на всю ширину контейнера nav

 (Прочитано 395 раз)
0 Пользователей и 1 Гость смотрят эту тему.
ShfVD
Живу я здесь
******

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

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



« : 09.07.2016, 20:34:43 »

Стандартный модуль меню выводит выпадающий список (li) строго привязанный к позиции родителя (ul)
Задача вывести выпадающий список по ширине контейнера nav
Приложенная схема, надеюсь, показывает, что нужно.
Чисто версткой сделать не смог, теоретически нужен как минимум скрипт, в которых я не силен.
Поделитесь, кто знает, готовым решением - в идеале модулем.  Платные варианты, варез не проходят.


* menu-qw.jpg (36.54 Кб, 659x500 - просмотрено 29 раз.)
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #1 : 09.07.2016, 21:03:58 »

это делается стандартной версткой
родитель дропдауна - position:intial;
весь нав - position: relative;
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #2 : 10.07.2016, 12:23:38 »

Прошу прощения за непонятливость, сказывается 2 года "не в теме", на Ваш вариант пока не получается.
Впрочем по порядку с иллюстрациями (меняю фаербагом)
Шаблон использую Master2 от YooThem , модуль меню там переопределен от стокового.

Структуру меню вижу так
Показать текстовый блок
Скрин 1, для визуализации dropdown включены.
Присваиваю родителю  position: inherit;, исходный:
Код
.uk-navbar-nav > li {  float: left;   position: relative;}
действительно dropdown "отвязались от родителя, при этом позиция потомка
Код
.uk-dropdown {  display: none;    position: absolute; }
скрин2.
Кстати
Код
.uk-dropdown {  display: none;    position: relative; }
привязаны к родителю.
скрин3.
Казалось бы остается правильно спозиционировать и разместить по горизонтали.
Но не тут то было:
когда вношу правки в свой файл *.css отказывается работать скрипт dropdown - меню не "выпадает"?!
Если есть время и настроение, подскажите где порылась собака.




* stock.jpg (310.12 Кб, 1178x877 - просмотрено 22 раз.)

* step1.jpg (223.77 Кб, 1231x800 - просмотрено 18 раз.)

* step2.jpg (106.93 Кб, 1062x416 - просмотрено 17 раз.)
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #3 : 10.07.2016, 16:43:58 »

там же less, его надо править, а оригинальные файлы стилей лучше не трогать, переопределять либо через свой лесс либо дописывать в custom.css

с юикитом немного по другому надо, там дропдаун скриптом выпадает, с абсолютным позиционированием, поэтому помимо изменения позиционирования родителей также необходимо c импортантом задавать необходимый left и width
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #4 : 10.07.2016, 17:58:54 »

Цитировать
там же less, его надо править, а оригинальные файлы стилей лучше не трогать, переопределять либо через свой лесс либо дописывать в custom.css
Так и делаю, см. пост выше
Цитировать
когда вношу правки в свой файл *.css отказывается работать скрипт dropdown - меню не "выпадает"?!
Цитировать
поэтому помимо изменения позиционирования родителей также необходимо c импортантом задавать необходимый left и width
с этим тоже понятно, но до этого не дошли, т.к.
Цитировать
с юикитом немного по другому надо, там дропдаун скриптом выпадает,
скрипту мешают работать мои новые стили.
Вот и спрашиваю как с этим справиться.
Очень надеюсь на помощь.
ЗЫ Поскольку изначально не видел выхода в верстке, прст расположил в ветке моделей. И дублировать не по феншую, но может разместить в ветке верстки/дизайна. Глядишь еще народ подтянется?
« Последнее редактирование: 10.07.2016, 18:02:38 от ShfVD » Записан
fbr
Живу я здесь
******

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

Сообщений: 1250


« Ответ #5 : 10.07.2016, 18:12:21 »

Все не так.
Для того, чтобы выпадающее меню было во всю ширину, нужно работать с атрибутом родительского тега li:
добавить в массив параметр justify

data-uk-dropdown="{'preventflip':'y','justify':'body'}"

Это нужно переопределять файл layouts/widget.php шаблона (или стиля, если задан)
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #6 : 10.07.2016, 18:34:38 »

Можно поподробней как это сделать.
Записан
fbr
Живу я здесь
******

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

Сообщений: 1250


« Ответ #7 : 10.07.2016, 18:40:42 »

В файле widget.php найти блок кода где рендерится меню
Внутри условия, где обрабатывается позиция menu, добавить строчку
Код
// Set menu renderer
if (isset($params['menu'])) {
..
} else if (in_array($widget->position, array('menu'))) {
..
$widget->nav_settings["dropdown"] = array("justify" => "body"); // добавить!
}  
 
        
Если у вас меню не слишком переделано - должно помочь
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #8 : 10.07.2016, 19:15:09 »

fbr спасибо большое, пошептало.
Меню во всю ширину. Дольше дело CSS.
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #9 : 10.07.2016, 19:32:50 »

хм, я обходился без правок widget.php, наверное по причине того, что не каждое выпадающее меню необходимо было на всю ширину
Записан
fbr
Живу я здесь
******

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

Сообщений: 1250


« Ответ #10 : 10.07.2016, 19:36:25 »

С этим атрибутом можно разные интересные вещи делать Wink
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #11 : 10.07.2016, 20:17:20 »

Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать data-uk-dropdown не к body,
а к (данном случае) uk-container (отстоит от body на  padding: 0 35px).
Скрипт вычисляет для каждого родителя data-uk-dropdown расстояние до начала страницы
и жестко прописывает стиль data-uk-dropdown, к примеру
Код
 style="left: 0px;  margin-left: -377.5px;
т.е. нажно -377 + 35
Записан
fbr
Живу я здесь
******

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

Сообщений: 1250


« Ответ #12 : 10.07.2016, 20:36:31 »

вместо body можете подставить любой класс родительского контейнера, например ".tm-navbar"
будет выводить по его ширине
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #13 : 10.07.2016, 21:00:19 »

Гениально! Так и делал, точку только не додумался поставить.
Спасибо еще раз.
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #14 : 10.07.2016, 21:57:58 »

Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать data-uk-dropdown не к body,
а к (данном случае) uk-container (отстоит от body на  padding: 0 35px).
Скрипт вычисляет для каждого родителя data-uk-dropdown расстояние до начала страницы
и жестко прописывает стиль data-uk-dropdown, к примеру
Код
 style="left: 0px;  margin-left: -377.5px;
т.е. нажно -377 + 35

да. примерно так по идее

я приписывал дополнительный класс для ссылки, к которому привязывался: .myclass + .uk-dropdown {тут с импортантом выставлял для нужного дропдауна конкретные значения позиционирования и размеры, left и width, вычислял ручками}
« Последнее редактирование: 10.07.2016, 22:01:02 от AlekVolsk » Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #15 : 10.07.2016, 22:15:57 »

да. примерно так по идее

я приписывал дополнительный класс для ссылки, к которому привязывался: .myclass + .uk-dropdown {тут с импортантом выставлял для нужного дропдауна конкретные значения позиционирования и размеры, left и width, вычислял ручками}
Дык ничего не нужно делать батенька (см. пост выше). Вместо body - класс нужного контейнера!!.
Тем паче ручами это как? А на разных мониторах (панорамных).
Решение супер. Короче нужно учить матчасть 🤔
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #16 : 10.07.2016, 22:26:40 »

решение, предложенное fbr - это применится ко всем дропдаунам всего меню, а если нужно только для конкретного? а для остальных не нужно?
Записан
fbr
Живу я здесь
******

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

Сообщений: 1250


« Ответ #17 : 10.07.2016, 22:57:03 »

Цитировать
В файле widget.php найти блок кода где рендерится меню
Внутри условия, где обрабатывается позиция menu, добавить строчку
на дропдауны меню в остальных позициях не повлияет
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Online Online

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



« Ответ #18 : 10.07.2016, 23:24:18 »

не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #19 : 12.07.2016, 16:20:26 »

не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину
Alek, Вы не правы. Нельзя быть насколько упрямым и продолжать гнуть свою линию не вникая.
Когда рендерим дропдаун горизонтально, виджет делает главное - вычисляет расстояние родителя от нужного места!
Для установки одного пункта, даже всех, кроме нужного вертикально (исходно) остается убрать вычисленный отступ и ширину (не задумываясь, тобиш ничего не вычисляя), а это дело займет пару минут.


* screenshot_2016_07_12_14_59_32.jpg (50.84 Кб, 927x207 - просмотрено 19 раз.)
Записан
Страниц: [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