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

ShfVD

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

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
это делается стандартной версткой
родитель дропдауна - position:intial;
весь нав - position: relative;
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Прошу прощения за непонятливость, сказывается 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

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

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

ShfVD

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

fbr

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

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

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

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Можно поподробней как это сделать.
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
В файле 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

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

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
хм, я обходился без правок widget.php, наверное по причине того, что не каждое выпадающее меню необходимо было на всю ширину
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
С этим атрибутом можно разные интересные вещи делать ;)
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать 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

  • Завсегдатай
  • 1625
  • 189 / 7
вместо body можете подставить любой класс родительского контейнера, например ".tm-navbar"
будет выводить по его ширине
*

ShfVD

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

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать 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, 21:01:02 от AlekVolsk »
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
да. примерно так по идее

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

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
решение, предложенное fbr - это применится ко всем дропдаунам всего меню, а если нужно только для конкретного? а для остальных не нужно?
*

fbr

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

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину
*

ShfVD

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

Модуль отображения сообщений группы телеграмм на сайте

Автор kunsaid

Ответов: 2
Просмотров: 275
Последний ответ 08.02.2024, 13:13:27
от kunsaid
Модуль вывода материалов

Автор alexandr-spb

Ответов: 3
Просмотров: 896
Последний ответ 21.10.2023, 00:20:17
от shur
Модуль вывода новостей по категориям

Автор Error222

Ответов: 1
Просмотров: 679
Последний ответ 31.07.2023, 09:44:53
от Vastriet
Модуль/компонент/плагин видео из Вконтакте

Автор Snip

Ответов: 0
Просмотров: 800
Последний ответ 25.05.2023, 19:16:49
от Snip
Модуль случайного вывода ссылок на материалы для Joomla! 2.5

Автор Serhio

Ответов: 22
Просмотров: 8581
Последний ответ 15.03.2023, 11:19:27
от Doctor Death