Mega menu umożliwiają wyświetlanie szerokiej gamy linków i kategorii treści w uporządkowanym, łatwym w nawigacji układzie.
Może to znacznie poprawić komfort przeglądania witryny przez odwiedzających, czyniąc nawigację bardziej intuicyjną i dostępną.
W WPBeginner używamy mega menu, aby importować najważniejsze linki na górze strony. Po kliknięciu na nie, otwiera się rozwijane menu, ujawniające dodatkowe kluczowe linki. Ta konfiguracja pozwoliła nam stworzyć przejrzyste i zorganizowane menu nawigacyjne, prezentujące szeroki zakres opcji bez zaśmiecania strony.
W tym artykule pokażemy ci, jak łatwo dodać mega menu do twojej witryny internetowej WordPress, krok po kroku.
Dlaczego warto dodać Mega Menu na twojej witrynie WordPress?
WordPress jest wyposażony w kreator typu „przeciągnij i upuść”, którego można używać do tworzenia wszelkiego rodzaju menu, w tym menu rozwijanych, menu nagłówka i innych. Istnieją nawet wtyczki, które umożliwiają tworzenie niestandardowych menu nawigacyjnych w motywach WordPress.
Jeśli jednak twoja witryna zawiera dużo treści, może być konieczne utworzenie mega menu. Pozwala to na dodanie wielokolumnowych menu rozwijanych do standardowej struktury menu WordPress.
Możesz użyć mega menu, aby uporządkować twoją treść pod różnymi nagłówkami i podtytułami, aby odwiedzający mogli szybko znaleźć to, czego szukają. Na przykład, jeśli tworzysz internetowy marketplace, możesz uporządkować wszystkie twoje kategorie i podkategorie produktów w mega menu.
Mega menu może również wyświetlać odwiedzającym bogatą treść, taką jak filmy, tekst, wyszukiwanie i ostatnie wpisy.
Można również dodawać obrazki, które ułatwiają skanowanie mega menu.
To powiedziawszy, zobaczmy, jak łatwo dodać mega menu do twojej witryny internetowej WordPress.
Jak stworzyć Mega Menu dla twojej witryny WordPress?
Najprostszym sposobem na dodanie mega menu do twojej witryny WordPress jest użycie Max Mega Menu. Wtyczka ta umożliwia dodawanie bogatych treści do twojego mega menu, w tym filmów, galerii obrazków, wyszukiwania i innych.
W ten sposób można tworzyć bardziej angażujące i pomocne menu.
Można również zmienić styl menu, dodając różne kolory, zmieniając wielkość litery i używając różnych ikonek.
Najpierw należy zainstalować i włączyć wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.
Włącz Mega Menu na twojej witrynie internetowej WordPress
Po włączaniu, przejdź do strony Mega Menu ” Położenia menu z kokpitu WordPress, aby zobaczyć wszystkie różne obszary, w których można dodać mega menu.
Możesz zobaczyć różne opcje w zależności od motywu WordPress.
Na początek musisz włączyć mega menu w każdej lokalizacji, w której chcesz ich używać.
Aby to zrobić, wystarczy kliknąć, aby rozwinąć lokalizację, a następnie zaznaczyć pole „Włączone”.
Następnie możesz zmienić „Wydarzenie”, które otworzy mega menu.
Domyślnym ustawieniem jest „Hover intent”, co oznacza, że odwiedzający musi najechać kursorem myszy na mega menu przez kilka sekund, aby je uruchomić. Działa to dobrze w przypadku większości witryn WordPress, ale można również otworzyć menu rozwijane „Efekt” i zamiast tego wybrać „Najechanie” lub „Kliknięcie”.
Jeśli wybierzesz opcję „Kliknij”, odwiedzający będzie musiał kliknąć, aby wyświetlić mega menu. Może to być przydatne, jeśli obawiasz się, że odwiedzający mogą przypadkowo uruchomić menu, co może być frustrujące.
Tymczasem „Hover” otworzy twoje mega menu, gdy tylko odwiedzający najedzie na nie myszką. Może to zachęcić odwiedzających do odkrywania różnych obszarów twojej witryny, więc możesz chcieć użyć „Hover” na stronach docelowych lub na stronie głównej twojej witryny internetowej.
Po podjęciu tej decyzji można zmienić sposób otwierania menu za pomocą ustawień „Efekt”.
Max Mega Menu ma różne animacje, które można wypróbować, w tym zanikanie i przesuwanie w górę. Można również zmienić szybkość animacji. Wypróbowując różne animacje, możesz stworzyć mega menu, które przyciągnie uwagę odwiedzających.
Jeśli nie chcesz używać żadnych animacji, po prostu otwórz pierwszą listę rozwijaną i wybierz „Brak”.
Domyślnie Mega Menu nie używa animacji na urządzeniach mobilnych, ponieważ smartfony i tablety mają zazwyczaj mniejszą moc obliczeniową. Jeśli jednak chcesz stworzyć unikatową animację dla użytkowników mobilnych, możesz skorzystać z ustawień w obszarze „Efekt (mobilny)”.
Jeśli chcesz przetestować swoje mega menu na urządzeniach mobilnych, zapoznaj się z naszym przewodnikiem na temat tego, jak zobaczyć mobilną wersję witryn WordPress z komputera stacjonarnego.
Jeśli wybrałeś „Kliknięcie” z rozwijanego menu „Zdarzenie”, upewnij się, że wybrałeś kartę „Zaawansowane”.
Tutaj możesz użyć opcji „Click Event Behavior”, aby zdefiniować, co się stanie, gdy odwiedzający kliknie twoje mega menu. Na przykład, drugie kliknięcie może zamknąć menu lub otworzyć nowy odnośnik.
Istnieje więcej ustawień, które można przejrzeć, ale to powinno wystarczyć dla większości blogów i stron internetowych WordPress.
Gdy będziesz zadowolony z konfiguracji wtyczki, kliknij „Zapisz zmiany”.
Aby włączyć mega menu dla większej liczby lokalizacji, wystarczy wykonać ten sam proces opisany powyżej.
Dostosuj wygląd Mega Menu na twojej witrynie internetowej
Następnym krokiem jest skonfigurowanie wyglądu mega menu na twojej witrynie internetowej.
Można to zrobić, wybierając kartę „Motywy menu” po lewej stronie ekranu.
Na tym ekranie można zmienić kierunek ikonek strzałek, użyć innej wysokości linii, dodać cień i nie tylko.
Kiedy będziesz zadowolony z twoich ustawień, nie zapomnij kliknąć „Zapisz zmiany”.
Jeśli chcesz usunąć te zmiany w dowolnym momencie, po prostu zaznacz pole „Resetuj stylizację widżetów”, a następnie kliknij „Zapisz zmiany”.
Następnie można dostosować pasek menu, który jest widoczny dla odwiedzających, gdy menu jest w domyślnym, zwiniętym stanie.
Aby wprowadzić te zmiany, kliknij kartę „Pasek menu”, a następnie użyj ustawień, aby zmienić kolor tła, dopełnienie, promień obramowania i inne.
Można nawet utworzyć gradient kolorów, wybierając dwa różne kolory w sekcji „Tło menu”.
Jeśli przewiniesz w dół, możesz zmienić wygląd menu najwyższego poziomu.
Jest to pierwszy rząd elementów, który jest widoczny, gdy mega menu jest zwinięte.
Ponieważ są one tak ważne, warto wyróżnić pozycje menu najwyższego poziomu.
Na przykład na poniższym obrazku używamy innego koloru tła.
W sekcji „Hover State” można podświetlić aktualnie wybraną pozycję menu najwyższego poziomu.
Na przykład na poniższym obrazku używamy efektu podkreślenia.
Może to pomóc odwiedzającemu zobaczyć, gdzie znajduje się w menu, co czyni go szczególnie przydatnym dla witryn, które muszą mieć duże mega menu.
Jeśli dodasz stan najechania kursorem, przewiń ekran do dołu i zaznacz pole „Podświetl bieżący element”.
Następnie można zmienić wygląd podmenu.
Jest to menu wyświetlane pod nadrzędnym menu, jak widać na poniższym obrazku.
Aby dostosować podmenu, kliknij kartę „Mega Menu”.
Ustawienia te można teraz wykorzystać do zmiany koloru tła podmenu, zwiększenia promienia w celu utworzenia zakrzywionych narożników, dodania dopełnienia i nie tylko.
Dodajesz treść do swojego mega menu za pomocą widżetów. Możesz na przykład dodać widżet Galeria i wyświetlić twoje najpopularniejsze produkty WooCommerce lub osadzać chmurę tagów wewnątrz mega menu. Widżety te mogą dostarczać dodatkowych informacji lub zachęcać odwiedzających do kliknięcia określonych pozycji menu.
Możesz dostosować wygląd tych widżetów, przewijając do sekcji „Widżety”. Można na przykład zmienić kolor tytułu widżetu, zwiększyć wielkość litery, dodać dopełnienie i dostosować wyrównanie.
Na tym ekranie możesz również dostosować wygląd pozycji menu drugiego poziomu i pozycji menu trzeciego poziomu na Twojej witrynie internetowej, blogu lub w sklepie internetowym. Są to elementy podrzędne pozycji menu najwyższego poziomu.
Podczas tworzenia twojego menu możesz dodać cztery lub nawet więcej poziomów, aby utworzyć zagnieżdżone mega menu. Jeśli to zrobisz, WordPress po prostu użyje stylizacji trzeciego poziomu dla wszystkich kolejnych poziomów.
Można to zobaczyć w działaniu na poniższym obrazku. Drugi poziom ma czerwony tekst, a zarówno trzeci, jak i czwarty poziom używają tego samego niebieskiego tekstu.
Gdy będziesz zadowolony z konfiguracji menu, nie zapomnij kliknąć „Zapisz zmiany”.
Jak dodać Mega Menu na twojej witrynie WordPress
Po zakończeniu konfiguratora mega menu, nadszedł czas, aby dodać je do twojej witryny internetowej.
Wystarczy przejść do strony Wygląd ” Menu na panelu bocznym administratora.
Jeśli chcesz przekształcić istniejące menu w mega menu, otwórz menu rozwijane „Wybierz menu do edycji” i wybierz je z listy. Pamiętaj tylko, że wybrane menu musi być przypisane do miejsca, w którym włączono funkcję mega menu.
Jeśli chcesz zacząć od zera, kliknij na „Utwórz nowe menu”, a następnie wpisz tytuł twojego nowego mega menu.
Następnie możesz wybrać lokalizację, której chcesz użyć i kliknąć „Utwórz menu”. Ponownie, musi to być lokalizacja, w której włączono mega menu.
Dodaj treść do twojego menu WordPress
Następnie dodaj wszystkie strony, posty, produkty WooCommerce i wszelkie inne treści, które chcesz uwzględnić w mega menu.
Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem dla początkujących, jak dodać menu nawigacyjne w WordPress.
Następnie musisz ułożyć twoje elementy w nadrzędnych i podrzędnych menu, których chcesz użyć w mega menu. Aby utworzyć podmenu, przeciągnij element poniżej elementu nadrzędnego, a następnie przeciągnij go lekko w prawo przed wydaniem.
Aby utworzyć wiele poziomów, po prostu przeciągnij elementy w prawo, aby pojawiły się wcięcia jeden pod drugim. Jest to podobne do tworzenia menu rozwijanego w WordPress.
Włącz funkcję Mega Menu
Po zakończeniu kliknij, aby rozwinąć „Max Mega Menu Settings” i zaznacz pole obok „Włącz”.
W tym polu można również zastąpić domyślne ustawienia mega menu. Pozwala to na tworzenie unikatowych mega menu dla różnych obszarów twojej witryny internetowej WordPress, więc śmiało wprowadzaj dowolne zmiany.
Następnie kliknij przycisk „Zapisz”.
Tworzenie układu Mega Menu
Teraz najedź kursorem myszy na pierwszy element najwyższego poziomu, a zobaczysz nowy przycisk „Mega Menu”. Kliknij ten przycisk.
Zostaną wyświetlone wszystkie ustawienia tego elementu najwyższego poziomu.
Domyślnie Max Mega Menu będzie używać stylu wysuwanego, w którym podmenu „wysuwają się” z boku. Aby zamiast tego utworzyć mega menu, otwórz menu rozwijane „Tryb wyświetlania podmenu” i wybierz „Układ standardowy” lub „Układ siatki”.
Standardowy układ pokazuje wszystkie podmenu w kolumnach.
Tymczasem układ siatki pozwala organizować elementy podmenu w kolumnach i wierszach.
Jest to idealne rozwiązanie, jeśli chcesz pokazać wiele treści, takich jak wszystkie produkty cyfrowe w swoim sklepie internetowym, lub masz na myśli bardzo konkretny układ.
Po wybraniu układu standardowego lub siatki wyświetlone zostaną wszystkie podmenu przypisane do tego układu nadrzędnego.
Teraz możesz zmienić sposób rozmieszczenia tych elementów w mega menu.
Jeśli korzystasz ze standardowego układu, możesz zmienić liczbę kolumn za pomocą menu rozwijanego w prawym górnym rogu.
Jeśli korzystasz z układu siatki, możesz dodawać kolumny i wiersze za pomocą przycisków „+Column” i „+Row”.
Gdy układ jest zadowalający, można rozmieścić elementy podmenu w różnych kolumnach i wierszach za pomocą funkcji przeciągnij i upuść.
Następnie nadszedł czas, aby zmienić ilość miejsca zajmowanego przez każdy element w kolumnie. Max Mega Menu pokazuje obecny, aktualny rozmiar jako ułamek całkowitej dostępnej szerokości.
Przykładowo, na poniższym obrazku obie kolumny zajmują połowę dostępnego miejsca.
Aby zmienić rozmiar elementu, wystarczy kliknąć przyciski strzałek, aby powiększyć lub pomniejszyć ułamek.
Tworzenie przyjaznego dla urządzeń mobilnych Mega Menu (tylko w układzie siatki)
Domyślnie Max Mega Menu wyświetla tę samą treść na komputerach stacjonarnych i urządzeniach mobilnych. Może to stanowić problem w przypadku układów siatki, ponieważ smartfony i tablety mają zazwyczaj mniejsze ekrany, a przewijanie w poziomie może być trudne.
Jeśli korzystasz z układu siatki, możesz utworzyć różne mega menu dla urządzeń mobilnych. Na przykład możesz użyć mniejszej liczby kolumn, aby użytkownicy nie musieli przewijać strony w poziomie. W ten sposób można stworzyć menu WordPress przystosowane do urządzeń mobilnych.
Możesz ukryć całe kolumny lub wiersze za pomocą ikonki „Ukryte na urządzeniach mobilnych”, która wygląda jak mały telefon komórkowy.
Wystarczy włączyć lub wyłączyć ikonkę, aby ukrywać i wyświetlać różne treści na komputerach stacjonarnych i urządzeniach mobilnych.
Dodawanie bogatych treści za pomocą widżetów Mega Menu
Gdy to zrobisz, możesz zacząć dodawać widżety do mega menu. Pozwala to na wyświetlanie dodatkowych treści w podmenu, takich jak ostatnie komentarze, filmy, galerie i inne.
Na przykład, możesz użyć obrazków do promowania wyprzedaży w twoim sklepie internetowym lub wyróżnienia najnowszych produktów.
Aby dodać widżet, wystarczy kliknąć, aby otworzyć menu rozwijane „Wybierz widżet….”.
Możesz teraz wybrać widżet z listy.
WordPress doda widżet do kolumny lub wiersza automatycznie, ale można go przenieść w nowe miejsce za pomocą funkcji przeciągnij i upuść.
Aby skonfigurować widżet, kliknij jego małą ikonkę klucza.
Spowoduje to otwarcie okna, w którym można dodać treść do widżetu i zmienić jego ustawienia.
Zobaczysz różne opcje w zależności od rodzaju tworzonego widżetu. Na przykład, jeśli dodasz widżet odtwarzacza muzyki audio do mega menu, zobaczysz ustawienia, w których możesz przesłać ścieżkę dźwiękową.
Wszystkie widżety mają pole „Tytuł”, w którym można dodać tekst, który pojawi się nad widżetem.
Po zakończeniu kliknij „Zapisz”, aby zapisać twoje zmiany, a następnie wybierz „Zamknij”. Aby dodać więcej widżetów do mega menu, wystarczy wykonać ten sam proces opisany powyżej.
Przejrzyj domyślne ustawienia Mega Menu
Następnie wystarczy kliknąć kartę „Ustawienia”.
Tutaj można użyć pól wyboru, aby ukryć lub pokazać różne treści w podmenu.
Można również ukryć lub pokazać podmenu na urządzeniach mobilnych i komputerach stacjonarnych, a także zmienić wyrównanie, aby podmenu otwierało się po lewej lub prawej stronie nadrzędnego poziomu.
Jeśli wprowadzisz jakiekolwiek zmiany w ustawieniach domyślnych, nie zapomnij kliknąć „Zapisz zmiany”.
Dodawanie ikonek z obrazkami do Mega Menu WordPressa
Ikonki z obrazkami pomagają odwiedzającym zrozumieć, czego dotyczy dana pozycja menu, bez konieczności czytania etykiety nawigacyjnej. Jest to szczególnie przydatne w przypadku dużych menu, w których odwiedzający może preferować szybkie skanowanie treści zamiast czytania każdej etykiety nawigacyjnej.
Za pomocą ikonek można wyróżnić najważniejsze treści. Na przykład, możesz zachęcić odwiedzających do sfinalizowania zakupu, dodając ikonkę koszyka do menu „Do kasy”.
Aby dodać ikonki obrazków do twojego menu nawigacyjnego, kliknij kartę „Ikonka”.
Możesz teraz wybrać dowolną ikonkę myślnika z wbudowanej biblioteki lub użyć twojego obrazka. Jeśli uaktualnisz do Max Mega Menu Pro, uzyskasz również dostęp do innych krojów pisma ikon, Genericons i FontAwesome.
Zakończ konfigurację Mega Menu na twojej witrynie WordPress
Po przejściu przez wszystkie te ustawienia, możesz zamknąć wyskakujące okienko, aby powrócić do głównej strony Wygląd ” Menu.
Teraz można powtórzyć ten proces dla każdego nadrzędnego elementu najwyższego poziomu.
Gdy będziesz zadowolony z konfiguracji mega menu, kliknij przycisk Zapisz menu, aby je uruchomić.
Teraz wystarczy przejść na front-end twojej witryny internetowej, aby zobaczyć mega menu w działaniu.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać mega menu na swojej stronie WordPress. Możesz również zapoznać się z naszym przewodnikiem krok po kroku, jak dodać przycisk w menu nagłówka WordPress i naszym poradnikiem, jak utworzyć lepkie pływające menu nawigacyjne w WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Moinuddin Waheed
I have thought many times over about implementing mega menu option like having a main menu with drop down of submenu with headline and description like the one wpbeginner has, but never knew that it can be achieved even without coding knowledge.
I will explore the mentioned options to see if it fits my present needs.
Thanks for the step by step guide for mega menu.
Paul Chapman
Ho
I have been looking for a mega menu plugin that allows me to have multi level mega menus… As in when I hover over a menu item within the 1st mega menu (1st level) another mega menu pops out with all the sub menu items in that, and so on and so forth. Is that possible?
WPBeginner Support
At the moment we do not have a specific plugin we would recommend for a multi-level mega menu like that. In the cases where you would want something like that you may want to consider having a landing page for the content where you have navigation into the content that you would want on the second mega menu.
Administrator
Paul Chapman
Hi
Thanks for the advice… Coincidentally that’s exactly what I was thinking and I think it may be a better solution.
The thing that’s bothering me about that is ux. There’s a lot of sub menus/pages/categories so a lot of scrolling and I’d much rather people just point and click… That said, the majority of users will be on mobile devices so, they’ll be scrolling with the menu either way, if you catch my drift… It’s a kind of catch 22 situation.
Jiří Vaněk
I’ve been struggling with the megamenu plugin constantly. I wanted to create a menu similar to what you have. For instance, a main link for 'contact’ and a submenu with two columns; one column with links to social networks and the other with text containing the address, phone number, email, and so on. However, I’m not succeeding. I manage to create a submenu with two columns and add text, but I’m struggling with the menu containing links to social networks. I created a new menu where I added links to social networks. I add this to the first column, but the links simply don’t show up. Instead, I see a message saying 'if you are trying to display max mega menu, use the max megamenu widget’. I’m desperate about this. I’ve tried to set up the megamenu several times, and it always breaks somewhere. I use the GeneratePress theme. Despite having a good understanding of WordPress, I’m completely failing at this.
WPBeginner Support
If the plugin keeps breaking for you we would recommend reaching out to the plugin’s support and they should be able to take a look and assist in finding the root of the issue.
Administrator
Jiří Vaněk
Thank you for the response and for your effort. Eventually, I looked into the template developer’s support. It’s GeneratePress. They have a detailed guide on how to create a mega menu using CSS code and other menu structure settings. I tried their solution on a test website, and it works. It does have limitations as it applies only to links, but for now, it partially solves my menu issues. So, for the time being, I’ll create a mega menu according to the template developer’s recommendations and continue investigating where I might be making a mistake or if there’s an issue with the template. I’ll also try reaching out to the developer’s support.
Ghazal Ba khadher
I want to add pages in the mega menu. I want to delete the word Pages as the headline. could you please help me in this regard please.
WPBeginner Support
In the menu settings, there should be the option to hide the text when you want to hide a section title like that.
Administrator
taufeeq khan
How to create content on mega menu …..for example when i click on mega menu then it open the new page of content. just like we are use home contact et.
WPBeginner Support
For what it sounds like you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/wp-tutorials/how-to-redirect-users-to-a-random-post-in-wordpress/
Administrator
Hart
Thanks a lot this is really helpful.
WPBeginner Support
Glad our guide was helpful
Administrator
Anon
How to add a megamenu on your site: install this plugin
Come on, give an actual tutorial next time. Megamenus are totally within the realm of development.
WPBeginner Support
While there is certainly the capacity to create a custom mega menu with code, it is difficult to have that code affect every theme and be beginner friendly. We will certainly add the code for different articles when we’re able but for now, we will continue to recommend plugins that already have the code created
Administrator
Ben
Is MaxMegaMenu compatible with WPML for multilingualism? They refer to POT files, but WPML only lists MegaMainMenu on their website. Am looking for an optimal combination of theme, menu builder, and multilingual plugin – to avoid problems with integration, for fast loading, and for liability.
Am comparing Avada, with MegaMainMenu, and WPML.
Thanks for your time in any knowledgeable reply.
WPBeginner Support
Sadly, you would need to reach out to the plugin’s support for if they are currently compatible or not.
Administrator
Abel
Not helpful at all. The question is, how do you really add a post or page onto the mega menu. I dont want to add categories or widgets to the menu!!!I want to add real links to the menu
WPBeginner Support
For specific posts or pages you would create a menu with it organized how you want and add the Navigation Menu widget to the mega menu
Administrator
Jay
Two beginner’s questions: Does Mega Menu work with any Wordpress theme?
&
Does Mega Menu allow for multiple mage menus?
WPBeginner Support
It should work on most themes. If you reach out to the plugin’s support they should be able to let you know of any conflicts.
You can have more than one mega menu if that is what you mean with your second question.
Administrator
Nick
Max Mega Menu is hand down the best plugin for what it does. As a customer to the premium version let me say that it is well worth the money, and reasonably priced. The developer is very friendly and helpful too which is always a big plus.