WordPress nie obsługuje mega menu natywnie. Standardowe menu tworzone przez system wp_nav_menu pozwala układać linki w zagnieżdżone listy, ale nie oferuje gotowego układu kolumn, obrazów ani dodatkowych bloków treści. Mega menu bez dedykowanej wtyczki wymaga więc własnego CSS-u i znajomości struktury HTML albo wykorzystania funkcji motywu lub edytora stron, który już masz zainstalowany.
Czy da się stworzyć mega menu bez wtyczki?
Tak, ale nie przez włączenie jednej opcji w panelu WordPressa. Najprostsze menu WordPressa składa się głównie z elementów ul, li oraz linków. Podmenu może być zagnieżdżone pod pozycją nadrzędną, natomiast układ kilku kolumn trzeba dopiero zbudować za pomocą stylów CSS.
W praktyce masz dwie drogi. Możesz ostylować istniejącą strukturę menu własnym kodem albo użyć page buildera, na przykład Elementora, jeśli edytor jest już częścią Twojej witryny i oferuje potrzebne moduły. Druga opcja nie oznacza całkowitego braku dodatkowego oprogramowania, ale pozwala nie instalować osobnej wtyczki przeznaczonej wyłącznie do mega menu.
CSS czy edytor stron – którą metodę wybrać?
Wybór zależy głównie od umiejętności technicznych, motywu oraz tego, jak rozbudowane ma być menu. Prosty układ kategorii można przygotować CSS-em. Kolumny z nagłówkami, ikonami, obrazami lub dodatkowymi blokami treści zwykle łatwiej zbudować w edytorze wizualnym.
| Metoda | Trudność | Wydajność | Wymagana wiedza |
|---|---|---|---|
| Własny CSS | Wysoka | Bardzo wysoka | CSS, HTML i znajomość motywu |
| Page builder | Niska | Średnia | Podstawowa obsługa edytora |
Własny CSS nie dodaje kolejnego rozszerzenia i może być lekkim rozwiązaniem, ale każdą zmianę wykonujesz ręcznie. Musisz też samodzielnie zadbać o widok mobilny, odstępy, kolejność elementów i obsługę klawiaturą.
Edytor stron ułatwia wizualne układanie kolumn i treści. Jeżeli korzystasz już z Elementora lub podobnego narzędzia, możesz użyć jego funkcji nagłówka i menu. Trzeba jednak sprawdzić, jakie zasoby ładuje builder, ponieważ rozbudowane moduły mogą zwiększyć rozmiar strony.
Przygotowanie metody CSS wymaga przede wszystkim:
- menu utworzonego w sekcji Wygląd → Menu lub w edytorze motywu,
- pozycji nadrzędnej, pod którą znajdą się linki podmenu,
- dostępu do Wygląd → Dostosuj → Dodatkowy CSS, jeśli motyw udostępnia tę funkcję,
- narzędzia deweloperskiego w przeglądarce do sprawdzania klas i identyfikatorów elementów.
Jak zbudować mega menu za pomocą CSS?
Poniższa metoda zakłada, że motyw już wyświetla standardowe menu WordPressa. Konkretne klasy mogą się różnić, dlatego traktuj selektory jako przykłady i sprawdź strukturę swojej witryny w inspektorze przeglądarki.
- Utwórz menu w panelu WordPressa i dodaj do niego pozycję nadrzędną oraz linki, które mają pojawić się w rozwijanym obszarze. Zagnieżdż linki pod pozycją nadrzędną, przeciągając je nieco w prawo.
- Otwórz stronę witryny, kliknij menu prawym przyciskiem myszy i wybierz opcję sprawdzania elementu. Znajdź element nadrzędny oraz jego podmenu. WordPress zwykle dodaje klasy takie jak
.menu-itemi.sub-menu, a także indywidualny identyfikator pozycji. - W panelu przejdź do Wygląd → Dostosuj → Dodatkowy CSS. W niektórych motywach ścieżka może wyglądać inaczej, dlatego przy braku tej opcji użyj ustawień motywu lub własnego arkusza stylów motywu potomnego.
- Ustaw pozycję nadrzędną jako punkt odniesienia i rozciągnij podmenu na większy obszar. Następnie użyj Flexboxa albo CSS Grid, aby rozmieścić jego elementy w kolumnach. Przykładowa logika może wyglądać tak:
.menu-item > .sub-menu { display: grid; }, ale selektor trzeba zawęzić do właściwego elementu. - Określ liczbę kolumn, szerokość panelu, odstępy i tło. Jeżeli menu ma zajmować całą szerokość nagłówka, sprawdź, czy rodzic nie ogranicza go przez
overflow,widthalbo pozycjonowanie kontenera. - Dodaj reguły dla stanu aktywnego lub najechania kursorem. Na komputerze podmenu może pojawiać się po wskazaniu pozycji, ale na urządzeniach dotykowych nie ma klasycznego hovera, więc potrzebujesz obsługi kliknięcia zapewnianej przez motyw lub dodatkowego skryptu.
- Dodaj media queries i przy mniejszej szerokości ekranu zmień układ kolumnowy na pionową listę. Sprawdź, czy panel nie wychodzi poza ekran i czy długie nazwy linków nie rozpychają całego nagłówka.
Największe ryzyko metody CSS dotyczy urządzeń mobilnych. Mega menu, które wygląda poprawnie na szerokim monitorze, może na smartfonie wychodzić poza ekran, zasłaniać przycisk menu albo uniemożliwiać dotarcie do ostatnich linków.
Nie warto od razu przepisywać całego menu w PHP. Bez znajomości plików motywu łatwo uszkodzić nagłówek, a aktualizacja motywu może nadpisać zmiany. Przy prostym układzie zacznij od klas i identyfikatora konkretnej pozycji. WordPress często nadaje elementom indywidualne identyfikatory, dzięki którym możesz zmienić tylko jedno podmenu, bez wpływania na pozostałą nawigację.
Na co uważać przy projektowaniu mega menu?
Rozbudowana nawigacja powinna pomagać w szybkim dotarciu do treści, a nie zastępować całą strukturę strony. Przed publikacją sprawdź kilka zachowań:
- Na telefonie otwieraj podmenu kliknięciem, a nie wyłącznie po najechaniu kursorem.
- Przetestuj nawigację klawiaturą, w tym fokus, kolejność przechodzenia i możliwość zamknięcia panelu.
- Ogranicz liczbę poziomów oraz skracaj długie etykiety, aby kolumny nie zawijały tekstu w przypadkowych miejscach.
- Sprawdź menu na różnych szerokościach ekranu, zwłaszcza na tablecie i małym smartfonie.
- Nie chowaj ważnych linków wyłącznie za efektem hover, ponieważ część użytkowników nie korzysta z myszy.
Gdy strona wymaga rozbudowanej dostępności, nietypowego zachowania na urządzeniach mobilnych albo menu zawiera wiele typów treści, sam CSS może nie wystarczyć. W takiej sytuacji lepiej wykorzystać funkcje już posiadanego edytora lub zlecić przygotowanie komponentu osobie, która zna HTML, CSS, JavaScript i wymagania dostępności.
