Responsywne wielopoziomowe mega menu w motywie DXPR.

Motyw DXPR buduje swoje mega menu na systemie menu samego Drupala. Strukturę tworzysz w Struktura › Menu; motyw zamienia ją w menu rozwijane, które dzielą się na kolumny wraz ze wzrostem, zagnieżdżają się na trzy poziomy, otwierają po najechaniu lub kliknięciu i zwijają się w menu hamburger na telefonach. Bez modułu mega menu, bez dodatkowej konfiguracji; te same odnośniki obsługują komputer i telefon.

Ten przewodnik obejmuje DXPR Theme 8.2.1 lub nowszy na Drupalu 10.3 i Drupalu 11. Zrzuty ekranu pochodzą z witryny na Drupalu 11.4 z DXPR Theme 8.2.2 i przykładowym trójpoziomowym menu; wykonano je w październiku 2026.

Jak zachowuje się menu

• Menu rozwijane z wcięć. Każdy odnośnik menu z dziećmi staje się menu rozwijanym. Rodzic z własną stroną dostaje podzieloną kontrolkę: odnośnik prowadzi do strony, a strzałka obok otwiera menu rozwijane. Rodzic bez strony otwiera menu rozwijane jednym kliknięciem.
• Kolumny z liczby odnośników. Menu rozwijane z co najmniej 8 bezpośrednimi dziećmi dzieli się na 2 kolumny, z co najmniej 15 na 3, z co najmniej 21 na 4, a z co najmniej 28 na 5. Od 3 kolumn menu rozwijane rozciąga się na pełną szerokość nagłówka: to układ mega menu.
• Trzy poziomy. Odnośnik w menu rozwijanym może mieć własne dzieci. Rozwijają się wewnątrz menu, z wcięciem pod rodzicem, więc struktura Usługi › Badania › Laboratoria działa bez spłaszczania.
• Najechanie albo kliknięcie. Na komputerze z myszą menu rozwijane otwierają się po najechaniu i zawsze po kliknięciu. Gdy którekolwiek menu w całym menu ma trzeci poziom, każde menu przełącza się na obsługę wyłącznie klikiem, aby podmenu nie zamykało się, gdy wskaźnik do niego wędruje. Ekrany dotykowe i okna węższe niż 992 piksele zawsze używają kliku.
• Klawiatura i czytniki ekranu. Klawisze strzałek, Enter, spacja, Escape i Tab poruszają się po menu, a przełączniki pokazują swój stan za pomocą aria-expanded; zgodnie ze wzorcem nawigacji ujawnianej WAI.
• Języki pisane od prawej do lewej dostają odbite menu rozwijane i podmenu.
• Telefony i tablety. Poniżej mobilnego breakpointu, domyślnie 1200 pikseli, nagłówek pokazuje ikonę hamburgera. Otwiera ona menu nad stroną, a strzałka obok każdego rodzica rozwija jego dzieci w miejscu: na drugim poziomie tak samo jak na pierwszym.

1. Utwórz strukturę

1. Przejdź do Struktura › Menu › Nawigacja główna (/admin/structure/menu/manage/main).
2. Dodaj potrzebne odnośniki przyciskiem Dodaj odnośnik. Dla rodzica bez własnej strony wpisz <button> (natywny przycisk klawiatury) albo <nolink> jako odnośnik; oba otwierają menu rozwijane.
3. Przeciągnij dzieci pod rodzica, aby wcięły się o jeden poziom (trzeci poziom jeszcze o jeden), a potem naciśnij Zapisz.
4. Edytuj każdy odnośnik rodzica, zaznacz Pokaż jako rozwinięte i naciśnij Zapisz. Aby rozwinąć wszystkich rodziców naraz, zaznacz Rozwiń wszystkie odnośniki menu w ustawieniach bloku menu głównego.

To cała konfiguracja. Trzy poziomy to maksimum renderowane przez menu rozwijane; głębsze odnośniki należą do strony, nie do menu.

Strona administracji menu: dzieci wcięte pod rodzicem, trzeci poziom pod drugim.

Odnośnik rodzica bez Pokaż jako rozwinięte renderuje się bez dzieci, z wyjątkiem własnej strony.

2. Sprawdź menu na komputerze

Otwórz witrynę i najedź na strzałkę obok odnośnika rodzica albo ją kliknij; rodzic bez strony też otwiera się po kliknięciu. Gdy menu ma trzeci poziom, menu rozwijane otwierają się tylko po kliknięciu. Krótka lista otwiera się jako jednokolumnowe menu; długa rozkłada się na kolumny, a od 3 kolumn na pełną szerokość nagłówka. Kolejność wynika z wag odnośników na stronie administracji menu, kolumna po kolumnie.

Menu Usługi na komputerze, z rozwiniętym trzecim poziomem.

3. Sprawdź menu na telefonie

Zwęź przeglądarkę poniżej mobilnego breakpointu albo otwórz witrynę na telefonie. Ikona hamburgera otwiera menu nad stroną. Stuknij strzałkę obok rodzica, aby rozwinąć jego dzieci w miejscu, oraz strzałkę obok odnośnika drugiego poziomu, aby rozwinąć trzeci poziom. Nic do konfigurowania: to to samo menu.

Menu mobilne z rozwiniętymi Usługami; strzałka obok Badań otwiera trzeci poziom.

4. Nadaj styl nagłówkowi i menu

Wszystko, co dotyczy wyglądu, znajdziesz na karcie Nagłówek i menu główne w ustawieniach motywu (Wygląd, potem Ustawienia obok DXPR Theme albo twojego podmotywu). Strona ustawień pokazuje podgląd na żywo podczas zmian.

• Układ: siedem układów nagłówka, od Normalny (logo po lewej, menu po prawej) przez wyśrodkowane warianty jedne pod drugimi i w wierszu, po Logo po prawej, menu po lewej.
• Styl nagłówka: Normalny, albo Nakładka, aby położyć nagłówek na treści strony z przezroczystym tłem, oraz krycie nagłówka, wysokość i wysokość logo. Stała pozycja trzyma nagłówek w widoku podczas przewijania; po jej włączeniu Przyklejony nagłówek przełącza nagłówek na mniejszą wysokość i własne krycie po przewinięciu.
• Odnośniki menu głównego: Szerokość menu rozwijanego (automatyczna albo stała od 100 do 500 pikseli), Styl czcionki (normalny, kapitaliki, pogrubienie albo lead), Odstępy odnośników oraz Styl hover w postaci krycia, kolorowego tła, kolorowego tekstu albo obramowania (u góry lub u dołu, wsuwanego z lewej, z prawej, ze środka albo pojawiającego się z góry).
• Nagłówek mobilny i Opcje menu mobilnego: mobilny breakpoint (ustaw maksymalny, 4100, aby zawsze używać nagłówka mobilnego), wysokość i pozycję nagłówka mobilnego, ikonę hamburgera (trzy albo dwie linie), jej animację i wyrównanie menu.
• Własne kolory nagłówka: szesnaście kolorów do wyboru: tło i tekst paska nawigacji, bloków nagłówka, menu, menu rozwijanych i menu mobilnego oraz tło i tekst hover dla 3 ostatnich; każdy z palety motywu albo własny.

„Każda zmiana to ustawienie, nie CSS, więc przetrwa aktualizacje motywu. Podmotyw ma własne ustawienia, więc wprowadzaj te zmiany na stronie ustawień podmotywu.”

Z modułu The Better Mega Menu albo innego modułu menu

Odinstaluj moduł i umieść blok podstawowy Nawigacja główna w regionie motywu „Nawigacja (zwijana)”, jeśli go tam jeszcze nie ma; to region, w którym menu hamburger zwija się na małych ekranach. Wszystko, co moduł robił konfiguracją, DXPR Theme robi strukturą menu: kolumny, poziomy, hover i menu mobilne. Nie przenosi się treści w menu rozwijanym, takich jak obrazy czy bloki tekstowe; umieść je na stronach docelowych, do których prowadzą odnośniki menu.

Zleć budowę menu agentowi AI

Menu to lista odnośników z hierarchią: strukturalne zadanie, w którym agent kodujący sprawdza się dobrze. Z zainstalowanym skillem Drush Webmaster (drush wm:setup-ai), agent tworzy i porządkuje odnośniki menu na podstawie briefu, takiego jak „menu Usługi z Badaniami, Nauczaniem i Infrastrukturą oraz trzema laboratoriami w Badaniach”. Ze skillem DXPR Theme (drush dxt:setup-ai) ustawia też układ nagłówka, przyklejanie i kolory menu pod markę. Wynik przeglądasz w witrynie.