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

  • 19 Ответов
  • 817 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

ShfVD

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
это делается стандартной версткой
родитель дропдауна - position:intial;
весь нав - position: relative;

*

ShfVD

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

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



*

AlekVolsk

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

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

*

ShfVD

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

*

fbr

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

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

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

*

ShfVD

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

*

fbr

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

        
Если у вас меню не слишком переделано - должно помочь

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
fbr спасибо большое, пошептало.
Меню во всю ширину. Дольше дело CSS.

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
хм, я обходился без правок widget.php, наверное по причине того, что не каждое выпадающее меню необходимо было на всю ширину

*

fbr

  • Живу я здесь
  • ******
  • 1274
  • 140
С этим атрибутом можно разные интересные вещи делать ;)

*

ShfVD

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

*

fbr

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

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Гениально! Так и делал, точку только не додумался поставить.
Спасибо еще раз.

*

AlekVolsk

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

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

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

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
да. примерно так по идее

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
решение, предложенное fbr - это применится ко всем дропдаунам всего меню, а если нужно только для конкретного? а для остальных не нужно?

*

fbr

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

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину

*

ShfVD

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