Zo maak je een WordPress mega menu (met én zonder plug-in)

Bij het ontwerpen van een website is een WordPress mega menu essentieel voor een soepele navigatie. Vooral bij e-commerce websites met een breed aanbod aan productcategorieën is dit superhandig.

Met een WordPress mega menu kun je menu inhoud overzichtelijk in meerdere kolommen of rijen tonen. Zo organiseer je grote hoeveelheden informatie makkelijk, en vinden bezoekers sneller wat ze zoeken zonder steeds door verschillende pagina’s te moeten klikken.

In deze uitgebreide WordPress tutorial laten we je zien hoe je een mega menu toevoegt, zowel met een plug-in als handmatig door code te bewerken. Daarnaast geven we tips voor de beste mega menu plug-ins en stappen om dropdown menu’s te maken als alternatief.

Een WordPress mega menu bestaat meestal uit meerdere niveaus:

• Top level: Dit is het belangrijkste menu dat bezoekers zien zodra ze op je website komen. Het bevat vaak de hoofdcategorieën of secties, zoals een Productpagina.
• Tweede level: Dit menu wordt zichtbaar als gebruikers over een item in het hoofdniveau hoveren of klikken. Bijvoorbeeld, bij een modewebsite zie je onder Producten vaak Kleding als tweede niveau.
• Derde level: Dit zijn submenu’s die verschijnen als bezoekers met een item uit het tweede niveau interactie hebben. Voor Kleding kunnen dat bijvoorbeeld Shirts, Truien en Jassen zijn.

Je kunt meer submenu niveaus maken, maar houd het bij drie om te voorkomen dat bezoekers overweldigd raken.

Hoe maak je een mega menu in WordPress

De makkelijkste manier om een mega menu in WordPress te maken, is met een plug-in. Als je wat technische kennis hebt, kun je ook handmatig een mega menu toevoegen met een custom CSS-code.

In dit deel leggen we beide methodes stap voor stap uit. Je kunt meteen naar de methode gaan die jouw voorkeur heeft.

Hoe maak je een WordPress mega menu met de Max Mega Menu plug-in

Max Mega Menu is een uitgebreide menu plug-in waarmee je meerdere menu locaties kunt beheren. Dankzij deze flexibiliteit kun je voor verschillende onderdelen van je website aparte mega menu’s instellen.

Voordat we dieper ingaan op hoe Max Mega Menu precies werkt, beginnen we eerst met de installatie en configuratie van de plug-in.

1. Max Mega Menu plug-in installeren

Log in op je WordPress dashboard en ga naar Plug-ins → Nieuwe plug-in. Typ Max Mega Menu in de zoekbalk, klik op Nu installeren en vervolgens op Activeren zodra je de juiste plug-in hebt gevonden.

Ga daarna naar Mega Menu in de linker sidebar om de standaardinstellingen aan te passen. Wil je bijvoorbeeld een menulocatie toevoegen? Volg dan deze stappen:

1. Ga naar Weergave → Menu’s.
2. Klik op Menulocaties en kies Nog een menulocatie toevoegen.
3. Geef aan waar op je website je het menu wilt laten zien, zoals de header, footer of sidebar.
4. Selecteer het custom menu dat je eerder hebt aangemaakt.
5. Klik op Menulocatie toevoegen.

Vink na het aanmaken het vakje Ingeschakeld aan onder Algemene instellingen.

Kies vervolgens bij Gebeurtenis één van de drie hoofdopties om het menu te activeren:

• Hover Intent: de gebruiker moet een paar seconden met de muis over het hoofdmenu zweven voordat het tweede niveau verschijnt. Deze vertraging helpt om per ongeluk openen te voorkomen.
• Hover: submenu’s openen direct zodra de gebruiker met de muis over het bovenliggende menu gaat. Door het ontbreken van vertraging zorgt dit voor soepele navigatie.
• Klik: bezoekers moeten op het menu klikken of tikken om het tweede niveau te openen. Ideaal voor touchscreens of als nauwkeurig met de muis werken lastig is.

Als je Klik selecteert, ga dan naar het tabblad Geavanceerd → Klik Evenement Gedrag. Kies vervolgens een van deze opties om te bepalen wat er gebeurt wanneer bezoekers op het mega menu klikken:

• De eerste klik opent het submenu, en de tweede klik sluit het weer.
• De eerste klik opent het tweede niveau van het menu, en de volgende klik volgt de pagina link.
• De eerste klik opent direct de pagina link.

Ga daarna terug naar het tabblad Algemene instellingen en ga naar Effect.

Hier kun je een animatietype voor je mega menu kiezen, zoals fade, fade up, slide of slide up. Je kunt ook de snelheid van de animatie instellen op snel, gemiddeld of langzaam.

Om animatie voor je mobiele menu in te schakelen, kies je een stijl naast Effect (Mobiel) – slide down, slide left of slide right.

Let op: het gebruik van interactieve elementen kan je website op mobiele apparaten of bij trage internetverbindingen vertragen.

Ben je tevreden met de instellingen? Klik dan op Wijzigingen opslaan.

2. Menu lay-out en uiterlijk instellen

Max Mega Menu biedt een standaard menu thema dat je meteen kunt gebruiken. Maar als je liever een eigen thema maakt, kun je het mega menu eenvoudig personaliseren.

Ga hiervoor naar Menu Thema’s in de Max Mega Menu instellingen. Klik op het drie puntjes pictogram naast Selecteer een thema om te bewerken en kies Nieuw thema toevoegen.

Onder Algemene Instellingen kun je de titel van het nieuwe thema aanpassen, een pijltjesstijl kiezen, de algemene regelhoogte instellen voor submenu items en een schaduw toepassen op je mega menu lay-outs.

Open daarna de Menu Bar tab om je top level menu te personaliseren. Dit bepaalt hoe bezoekers je navigatiemenu zien in de verkleinde weergave.

Bovenaan deze tab vind je instellingen om de hoogte van het menu en de achtergrondkleur aan te passen. Je kunt ook custom padding instellen voor de gewenste lay-out en randen toevoegen rond menu-items voor een duidelijker visueel onderscheid.

Als je naar beneden scrolt, is er ook een speciale sectie om je top level menu-items aan te passen:

• Uitlijning menu-items. Plaats alle menu-items links, in het midden of rechtsboven op je website.
• Lettertype item. Pas de typografie van het menu aan zodat het aansluit bij het ontwerp van je website – van lettertype en grootte tot gewicht, kleur en stijlopties.
• Achtergrond item. Verander de achtergrondkleur van elk menu-item. Laat het transparant als je al een achtergrond voor het menu hebt ingesteld.
• Afstand item. Pas de ruimte en padding rond elk item aan om je mega menu lay-out precies goed te krijgen.
• Rand item. Bepaal de kleur, breedte en radius van de rand om verschillende visuele effecten te creëren.
• Markeer huidig item. Als dit aanstaat, wordt het huidige menu-item gemarkeerd wanneer gebruikers er met de muis overheen gaan, wat de navigatie intuïtiever maakt.

Als je het bovenste menu hebt ingesteld, ga je verder naar het tabblad Mega Menu. Hier kun je het lettertype, de achtergrondkleur, de ruimte en de rand aanpassen van je tweede- en derde level menu-items.

Geef het hoofdmenu en de submenu’s een ander kleurenschema om ze visueel van elkaar te onderscheiden. Gebruik wel dezelfde typografie om de stijl van je website consistent te houden.

Vergeet niet je wijzigingen op te slaan als je klaar bent.

3. Content toevoegen aan het WordPress menu

Max Mega Menu werkt met een handige drag-and-drop interface, waarmee je makkelijk nieuwe content toevoegt. Naast tekstlinks kun je ook WooCommerce producten, afbeeldingen en zoekfilters in je menu plaatsen.

Begin door naar Weergave → Menu’s te gaan om een nieuw menu aan te maken of je bestaande menu te bewerken. Volg daarna deze stappen:

1. Vink het vakje Inschakelen aan in het Max Mega Menu instellingenpanel links. Hiermee kun je ook de menustanden voor meerdere locaties instellen.
2. Scroll naar Pagina’s, selecteer alle pagina’s en klik op Aan menu toevoegen.
3. Herhaal dit proces voor Berichten, Categorieën en Productcategorieën.
4. Onder Menustructuur kun je subcategorieën slepen naar de juiste hoofdcategorie. Je maakt een derde niveau door een menu-item iets naar rechts te slepen onder een tweede niveau, enzovoort.

Standaard gebruikt deze plug-in een flyout of dropdownmenu stijl. Om een mega menu te maken, beweeg met je muis over een van je pagina’s en klik op de knop Mega Menu.

Er verschijnt dan een pop-up waarin je de weergavemodus van het submenu instelt op Raster Lay-out of Standaard Lay-out.

Met de raster lay-out van het mega menu kun je een menu maken met meerdere kolommen en rijen.

Bij de standaard lay-out kun je alleen het aantal kolommen aanpassen.

Wil je je menu visueel aantrekkelijker maken? Klik dan op Selecteer een widget om toe te voegen aan het panel en kies iets uit de lijst. Je kunt bijvoorbeeld een zoekbalk, afbeeldingsgalerij, kalender, audiofragment, video of product filters toevoegen.

Heeft je website een complex menu met veel links? Wijs dan een icoon toe aan elk item om de gebruikservaring te verbeteren. Ga naar Pictogrammen in de linker sidebar en kies pictogrammen uit verschillende platformen.

Sluit daarna het Mega Menu pop-upvenster en herhaal dit proces voor elke top level pagina.

Als je alle instellingen hebt geconfigureerd, klik je op Menu opslaan om het mega menu op je website te activeren.

Hoe maak je handmatig een WordPress mega menu door middel van coderen

Een mega menu handmatig toevoegen via coderen geeft je volledige controle over het ontwerp en de werking. Maar deze methode vereist wel dat je weet hoe je met custom CSS werkt én dat je je themabestanden kunt aanpassen.

Volg deze uitleg om een mega menu toe te voegen aan je WordPress website:

1. Bereid je ontwikkelomgeving voor

WordPress is een open source contentmanagementsysteem (CMS), wat betekent dat je eigen code kunt gebruiken om thema’s en plug-ins aan te passen.

Maar: code bewerken op je live website kan tot onverwachte problemen leiden. Maak daarom eerst een back-up van je WordPress website en werk in een veilige testomgeving.

Als je managed website hosting voor WordPress gebruikt via Hostinger, zit dat goed: de beheerde WordPress hosting biedt automatische back-ups om je bestanden veilig te houden. De Business– en Cloud Startup-plannen bevatten bovendien een WordPress staging tool, waarmee je een kopie van je website kunt maken om aanpassingen te testen voordat je ze live zet.

Zo stel je een WordPress staging omgeving in met Hostinger:

1. Log in op hPanel en ga naar Websites.
2. Selecteer je domeinnaam en klik op Beheren.
3. Ga in de linker sidebar naar WordPress → Staging.
4. Open het tabblad Staging en klik op Staging aanmaken.

5. Maak een subdomein aan voor je staging omgeving. Het proces kan tot 15 minuten duren om af te ronden.

2. Open het stylesheet bestand van je thema

De volgende stap is het aanpassen van het bestand style.css van je thema op de staging website die je net hebt aangemaakt.

Bij de meeste hostingproviders moet je verbinding maken via een externe FTP-client. Gelukkig kunnen Hostinger gebruikers dit gemakkelijk doen via hPanel:

1. Ga naar Bestanden → Bestandsbeheer en kies Toegang tot bestanden van (jouw domein).
2. Open de map public_html → staging → wp_content → thema’s.
3. Kies het WordPress thema dat je wilt aanpassen en open de map.
4. Dubbelklik op het bestand style.css om wijzigingen aan te brengen.
5. Scroll naar de onderkant van de teksteditor en voeg daar deze code toe:

.main-navigation ul:hover li ul,
.main-navigation ul:hover li ul li ul {
    display: inherit;
}

Hierdoor worden je tweede en derde level items zichtbaar zodra bezoekers er met de muis overheen bewegen.

3. Pas het mega menu aan

Wil je het menu verder stylen? Voeg dan je eigen code toe aan de stylesheet van je thema. Hieronder vind je een paar veelgebruikte CSS snippets voor een WordPress mega menu:

Kolommen maken in het mega menu:

.mega-menu li.mega-menu-column {
  width: 25%; /* for a 4-column layout */
  float: left;
  padding: 10px;
}

Kleuren, padding en tekststijl aanpassen per menu-item:

.mega-menu ul.mega-sub-menu li a {
  color: #555;
  padding: 8px 15px;
  display: block;
  text-decoration: none;
}

Menu lay-out optimaliseren voor weergave op mobiel:

@media screen and (max-width: 767px) {
  .mega-menu li.mega-menu-column {
    width: 100%;
    float: none;
  }
}

Of deze codefragmenten goed werken, hangt af van de rest van de CSS en HTML-structuur van je website. Daarom is het belangrijk om elke code te testen en waar nodig aan te passen.

Beste WordPress mega menu plug-ins

Hoewel je ook handmatig een mega menu in WordPress kunt maken, is die methode niet geschikt voor wie geen ervaring heeft met coderen. Ben je een beginner? Dan kun je het beste een WordPress plug-in gebruiken om het proces een stuk makkelijker te maken.

Naast Max Mega Menu zijn dit drie van de beste WordPress plug-ins om een mega menu mee te maken. QuadMenu kun je rechtstreeks installeren via de WordPress plug-in directory. WP Mega Menu Pro en JetMenu zijn alleen verkrijgbaar via externe marktplaatsen.

1. QuadMenu

QuadMenu is een open source mega menu plug-in die volledig native draait binnen WordPress. Je krijgt toegang tot een brede selectie aan thema’s en menu-locaties.

Met de gratis versie kun je onder andere een navigatie widget binnen je menu tonen, zelf bepalen wanneer het menu inklapt (breakpoints instellen) en kiezen uit verschillende mega menu stijlen. Denk aan off-canvas, sticky, horizontale of verticale mega menu’s.

De betaalde plannen beginnen vanaf $49 per jaar. Daarmee krijg je extra functies zoals tabbladen, login en registratieopties, sociale media menu’s en carrousel menu’s.

2. WP Mega Menu Pro

WP Mega Menu is een gebruiksvriendelijke mega menu bouwer, ideaal voor beginners. Je kunt snel aan de slag en meteen responsieve mega menu’s maken.

Hoewel het makkelijk in gebruik is, biedt deze WordPress mega menu plug-in toch uitgebreide opties om je menu aan te passen. Denk aan het wijzigen van lettertypes, menutypes, post-meta gegevens, kleurenschema’s en animaties.

WP Mega Menu is alleen beschikbaar als premium versie en kost $19 per licentie, geldig voor een onbeperkte hoeveelheid aan websites met één jaar updates en hulp met prioriteit.

3. JetMenu

JetMenu is een premium plug-in waarmee je een WordPress mega menu maakt met afbeeldingen, video’s, audio-opnames en andere interactieve content.

Voor $43 per jaar krijg je toegang tot een drag-and-drop bouwer en verschillende menu-indelingen — zoals hamburger-, horizontale en verticale menu’s.

Een opvallende functie is de preset manager, waarmee je meerdere templates kunt maken en opslaan voor verschillende menu’s.

Voordelen van het Gebruik van een WordPress mega menu

In vergelijking met traditionele menu’s heeft een mega menu in WordPress verschillende voordelen voor je website:

• Betere organisatie. Heeft je WordPress website veel content of productcategorieën? Een mega menu helpt die netjes te ordenen en overzichtelijk aan gebruikers te presenteren.
• Verbeterde uitstraling. Mega menu’s kun je helemaal aanpassen aan je website branding, zodat het design strak en samenhangend blijft.
• Meer betrokkenheid. Gebruikers blijven eerder op je website als ze makkelijk vinden wat ze zoeken. Een mega menu maakt navigeren eenvoudiger, waardoor bezoekers langer blijven en er meer interactie is met je content.
• Efficiënt ruimtegebruik. Met een mega menu laat je veel opties zien zonder dat de lay-out rommelig wordt.
• Concurrentievoordeel. Een mega menu kan jouw website laten opvallen vergeleken met concurrenten en laat zien dat je inzet op een geweldige gebruikerservaring. 

WordPress mega menu alternatief

Hoewel een WordPress mega menu je helpt een uitgebreide menustructuur te laten zien, kun je ook kiezen voor een simpelere optie met dropdown of flyout menu’s.

Dit is vooral handig als je een overzichtelijke menu hiërarchie hebt en de website strak en rustig wilt houden.

Hoe maak je dropdown menu’s met een klassiek thema

Als je een klassiek thema gebruikt, kun je zo een dropdown menu maken via de WordPress Customizer:

1. Log in op je WordPress dashboard en ga naar Weergave → Customizer.
2. Kies in de Customizer voor Menu’s en selecteer je bestaande menu. Maak anders een nieuw menu aan.
3. Klik op Items Toevoegen om nieuwe pagina’s of berichten toe te voegen.
4. Rangschik de submenu’s door ze iets naar rechts onder het bovenliggende menu-item te slepen.

5. Als je klaar bent, ga je naar Menu Locaties en wijs je je dropdownmenu toe aan de gewenste plek.
6. Klik op Publiceren om je wijzigingen op te slaan.

Zo maak je dropdown menu’s met de Blok Editor

Voor gebruikers van een blok thema maak je een dropdown menu met de Gutenberg Editor:

1. Ga in je WordPress dashboard naar Weergave → Editor.
2. Klik in de Blok Editor bovenaan op het plus (+) icoon en kies Blokken.
3. Zoek het Navigatie blok en sleep het naar de plek waar je het wilt plaatsen.

4. Als je het Navigatie blok hebt toegevoegd, ga dan naar de rechter sidebar en open het panel met Blok instellingen.
5. Klik op het plus (+) icoon en kies Pagina link om je hoofdpagina’s en submenu items toe te voegen.

6. Om een dropdownmenu te maken, sleep je submenu items iets naar rechts onder het bovenliggende item. Of klik op het driepuntjes pictogram naast je bestaande menu’s en kies Submenu link toevoegen.

7. In het tabblad Instellingen kun je de menu lay-out aanpassen en het menu verticaal of horizontaal weergeven.
8. Als je tevreden bent met het uiterlijk en de werking van het dropdownmenu, klik je op Publiceren of Bijwerken om je wijzigingen op te slaan.

Conclusie

Voordat je je WordPress website lanceert, is het belangrijk dat de navigatie intuïtief is. Voor webshops en websites met veel pagina’s is een mega menu de ideale oplossing.

In tegenstelling tot het standaard menu kun je met een mega menu complexe informatie op een eenvoudige en toch visueel aantrekkelijke manier ordenen.

Er zijn twee manieren om een mega menu aan je website toe te voegen. Voor beginners raden we aan om Max Mega Menu of andere plug-ins te gebruiken.

Ben je een gevorderde gebruiker die meer flexibiliteit wil? Gebruik dan CSS-code om het mega menu helemaal naar wens aan te passen. Om tijd en moeite te besparen, kun je het beste kiezen voor een betrouwbare hostingprovider zoals Hostinger, die een WordPress staging tool en een ingebouwde code-editor biedt.

We hopen dat deze WordPress mega menu tutorial je de juiste handvatten heeft gegeven om een betere gebruikerservaring te bieden op jouw website. Heb je nog vragen? Laat dan gerust een reactie achter hieronder.

WordPress mega menu FAQ’s

Vind hier de antwoorden op veelgestelde vragen over WordPress mega menu’s.

Alle educatieve content op deze website wordt zorgvuldig gecontroleerd en voldoet aan de hoge redactionele standaarden van Hostinger.

Alle tutorials op deze website voldoen aan de strenge edactionele standaarden en waarden van Hostinger.