Адаптивні багаторівневі мега-меню з DXPR Theme.

DXPR Theme будує своє мега-меню зі стандартної системи меню Drupal. Ви створюєте структуру в розділі Структура › Меню, а тема перетворює її на випадні списки, що з ростом розбиваються на колонки, вкладаються на три рівні вглиб, відкриваються наведенням або кліком і складаються в гамбургер-меню на телефонах. Жодного модуля мега-меню, жодного додаткового налаштування, і ті самі посилання служать комп’ютеру й мобільному.

Цей посібник охоплює DXPR Theme 8.2.1 або новіші на Drupal 10.3 і Drupal 11. Знімки екрана зроблено в жовтні 2026 року на сайті Drupal 11.4 із DXPR Theme 8.2.2 і зразковим трирівневим меню.

Як поводиться меню

• Випадні списки з відступів. Кожне посилання меню, що має дочірні, стає випадним списком. Батьківський пункт із власною сторінкою отримує розділений елемент керування: посилання веде на сторінку, а стрілка поруч відкриває випадний список. Батьківський пункт без сторінки відкриває випадний список одним кліком.
• Колонки з кількості посилань. Випадний список із 8 або більше прямими дочірніми розбивається на 2 колонки, із 15 або більше на 3, із 21 або більше на 4, а з 28 або більше на 5. Починаючи з 3 колонок, випадний список розтягується на всю ширину шапки: це і є макет мега-меню.
• Три рівні. Посилання всередині випадного списку може мати власні дочірні. Вони розгортаються всередині випадного списку з відступом під своїм батьківським пунктом, тож структура Services › Research › Laboratories працює без сплощення.
• Наведення або клік. На комп’ютері з мишею випадні списки відкриваються наведенням і завжди кліком. Коли будь-який випадний список у меню має третій рівень, кожен випадний список переходить лише на клік, щоб підменю ніколи не закривалося, поки вказівник рухається до нього. Сенсорні екрани й вікна вужчі за 992 пікселі завжди використовують клік.
• Клавіатура й програми зчитування з екрана. Клавіші зі стрілками, Enter, пробіл, Escape і Tab переміщують по меню, а перемикачі показують свій стан через aria-expanded, за патерном навігації WAI disclosure.
• Мови справа наліво отримують дзеркальні випадні списки й підменю.
• Телефони й планшети. Нижче точки переходу на мобільне меню (за замовчуванням 1200 пікселів) шапка показує значок гамбургера. Він відкриває меню поверх сторінки, а стрілка поруч із кожним батьківським пунктом розгортає його дочірні на місці: на другому рівні так само, як на першому.

1. Створіть структуру

1. Перейдіть до розділу Структура › Меню › Головна навігація (/admin/structure/menu/manage/main).
2. Додайте потрібні посилання кнопкою Додати посилання. Для батьківського пункту без власної сторінки введіть як посилання <button> (нативна клавіатурна кнопка) або <nolink>; обидва відкривають випадний список.
3. Перетягніть дочірні під їхній батьківський пункт, щоб вони змістилися на один рівень, а третій рівень ще на один, а потім натисніть Зберегти.
4. Відредагуйте кожне батьківське посилання, позначте Показувати розгорнутим і натисніть Зберегти. Щоб розгорнути всіх батьків одразу, позначте натомість Розгорнути всі посилання меню у налаштуваннях блока головного меню.

Це все налаштування. Три рівні: максимум, який показують випадні списки; глибші посилання належать сторінці, а не меню.

Сторінка адміністрування меню: дочірні з відступом під батьківським пунктом, третій рівень під другим.

Батьківське посилання без позначки Показувати розгорнутим показується без дочірніх, крім власної сторінки.

2. Перевірте меню на комп’ютері

Відкрийте сайт і наведіть на стрілку поруч із батьківським посиланням або клацніть її; батьківський пункт без сторінки також відкривається кліком. Коли меню має третій рівень, випадні списки відкриваються лише кліком. Короткий список відкривається як одноколонковий випадний список; довгий розкладається в колонки, а починаючи з трьох колонок, на всю ширину шапки. Порядок відповідає вазі посилань на сторінці адміністрування меню, колонка за колонкою.

Випадний список Services на комп’ютері з розгорнутим усередині третім рівнем.

3. Перевірте мобільне меню

Звузьте браузер нижче точки переходу або відкрийте сайт на телефоні. Значок гамбургера відкриває меню поверх сторінки. Торкніть стрілку поруч із батьківським пунктом, щоб розгорнути його дочірні на місці, і стрілку поруч із посиланням другого рівня, щоб розгорнути третій рівень. Налаштовувати нічого: це те саме меню.

Мобільне меню з розгорнутим Services; стрілка поруч із Research відкриває третій рівень.

4. Оформіть шапку й меню

Усе про зовнішній вигляд живе на вкладці Шапка і головне меню налаштувань теми (Зовнішній вигляд, потім Налаштування поруч із DXPR Theme або вашою субтемою). Сторінка налаштувань показує живий попередній перегляд, поки ви їх змінюєте.

• Макет: сім макетів шапки, від Звичайний (логотип ліворуч, меню праворуч) через центровані складені й рядкові варіанти до Логотип праворуч, меню ліворуч.
• Стиль шапки: Звичайний або Накладання, щоб розмістити шапку поверх вмісту сторінки з прозорим тлом, плюс непрозорість, висота шапки й висота логотипа. Фіксоване положення тримає шапку в полі зору під час прокручування; коли його ввімкнено, Липка шапка перемикає шапку на меншу висоту й власну непрозорість після зміщення прокручування.
• Посилання головного меню: Ширина випадного списку (автоматична або фіксована ширина від 100 до 500 пікселів), Стиль шрифту (звичайний, верхній регістр, жирний або головний текст), Інтервали посилань і Стиль наведення з непрозорості, кольорового тла, кольорового тексту або межі (зверху чи знизу, що висувається зліва, справа, зсередини або проявляється зверху).
• Мобільна шапка і Опції мобільного меню: точка переходу на мобільне меню (встановіть максимум, 4100, щоб завжди використовувати мобільну шапку), висота й положення мобільної шапки, значок гамбургера (три або дві риски), його анімація та вирівнювання меню.
• Власні кольори шапки: шістнадцять налаштувань кольору: тло й текст для панелі навігації, блоків шапки, меню, випадних списків і мобільного меню, плюс тло й текст наведення для останніх трьох, кожне з палітри теми або власне значення.

Кожна зміна є налаштуванням, а не CSS, тож вона переживає оновлення теми. Субтема має власні налаштування, тож вносьте ці зміни на сторінці налаштувань субтеми.

Перехід із The Better Mega Menu або іншого модуля меню

Видаліть модуль і розмістіть стандартний блок Головна навігація у регіоні теми Навігація (згортається), якщо його там ще немає; саме в цей регіон згортається гамбургер-меню на малих екранах. Усе, що модуль робив налаштуваннями, DXPR Theme робить зі структури меню: колонки, рівні, наведення й мобільне меню. Що не переноситься, так це контент усередині випадного списку, як-от зображення чи текстові блоки; розмістіть їх на цільових сторінках, куди ведуть посилання меню.

Дозвольте AI-агенту побудувати меню

Меню є списком посилань з ієрархією: різновид структурованого завдання, з яким кодувальний агент добре справляється. Зі встановленою навичкою Drush Webmaster (drush wm:setup-ai), ваш агент створює й упорядковує посилання меню за брифом, як-от «меню Services із Research, Teaching і Facilities і трьома лабораторіями під Research». З навичкою DXPR Theme (drush dxt:setup-ai) вона також встановлює макет шапки, липку поведінку й кольори меню під бренд. Результат ви перевіряєте на сайті.