Een Mega Menu in Elementor – Daar heb je geen plugins voor nodig!

Maak zelf een Mega Menu in Elementor – En dat helemaal zonder hulp van plugins!

Update maart 2023 : Inmiddels is bekend dat vanaf Elementor Pro 3.12 een mega menu standaard onderdeel zal zijn van Elementor Pro, lees hier meer over.

Wanneer ik je ga vertellen, hoe je zelf een mega menu in Elementor kan maken, is het natuurlijk altijd wel leuk om te weten, wat nu eigenlijk een mega menu is. Want ondanks dat ik zelf aanneem, dat de meeste mensen dat wel weten, kom ik nog regelmatig mensen tegen, die niet exact weten wat een mega menu is.

Het allereenvoudigste type menu is natuurlijk een ‘plat’ navigatiemenu. Je ziet het hier op de site ook. Een balk (al dan niet met een andere achtergrond dan de rest van de site) met een aantal items waar je op kan klikken.

Dat is natuurlijk heel leuk, maar het heeft ook zijn beperkingen. Want met een beetje goed fatsoen kan je daar zo’n 5-7 items in kwijt, maar dan houdt het toch echt wel op. Heb je meer waar je door heen wilt navigeren, dan moet je toch naar wat anders op zoek, maar ook dat hebben we in de aanbieding. Dank zij Windows en de Mac zijn we allemaal intussen ook vertrouwd met het ‘drop down’ menu. Nog steeds een balk met een aantal opties, maar ga je hier overheen, dan ‘klappen’ andere menu’s (submenu’s) vanuit dat menu naar beneden. En ieder submenu kan weer een eigen submenu hebben…

En daar begint het vaak wat chaotisch te worden. Want een submenu van een submenu van een submenu maakt je scherm toch wel heel erg vol. En maakt het heel lastig om je te concentreren.

Het is dan ook niet verwonderlijk dat er al snel naar andere oplossingen werd gezocht en één van die oplossingen is het ‘Mega Menu’. Een groot panel, wat zichtbaar wordt wanneer je over een optie in de eerste laag van je menustructuur klikt.

Hierboven zie je een aardig voorbeeld in de winkel van CoolBlue.

En het is juist ook in webshops waar deze vorm van menu’s vaak wordt toegepast. Maar eigenlijk in iedere website met een groot aantal opties om uit te kiezen, is een mega menu een goede oplossing om het navigeren voor de bezoeker eenvoudiger te maken.

In het bovenstaande voorbeeld van CoolBlue zie je hoe het wordt toegepast om tekst te tonen, maar je kan nog veel meer zaken kwijt in je mega menu. Kijk bijvoorbeeld maar eens naar het menu wat er bij Wehkamp wordt gebruikt.

Behalve de reguliere menu items, laten ze ook een banner voor een kortingsactie en nog wat andere zaken zien.

Want dat is het aardige van zo’n mega menu, in principe kan je er van alles in kwijt, wat op dat moment handig is voor de consument.

Plugins voor mega menu’s

Nu zijn er talloze plugins voor mega menu’s. Ook voor een mega menu in Elementor heb je je eigenlijk een enorme keuze: Vrijwel iedere Elementor Add-on heeft in ieder geval in de pro-, premium- of plus-versie wel een variatie op een mega menu editor. Je je kan er als aanbieder van zo’n plugin eigenlijk niet meer omheen.

Toch, wanneer ik denk aan een mega menu in Elementor, dan denk ik niet direct aan het toevoegen van nog een plugin aan mijn site. Want waarom zou ik mijn site bezwaren met nog een plugin en -omdat het meestal toch betaalde plugins betreft- mijn geld hier aan besteden, wanneer ik het heel gemakkelijk zelf kan bouwen?

Nou ja, ‘heel gemakkelijk’ dat valt best tegen. Ik zal er iets meer moeite voor moeten doen, maar daartegenover staat dat iedere mega-menu plugin die ik tot nu toe tegen ben gekomen ook niet direct super intuïtief was.

Voor de duidelijkheid, wat ik hier beschrijf werkt uitsluitend met Elementor Pro, de betaalde versie van Elementor.

De basis

De basis voor een mega menu in Elementor is een oude vertrouwde navigatiebalk. En die navigatiebalk kan je eigenlijk op een aantal manieren maken.

In dit artikel laat ik je een aantal oplossingen zien en bij de verschillende oplossingen hoort een verschillend ‘gedrag’ van de balk.

De makkelijkste oplossing is er één, waar de bezoeker klikt op de navigatiebalk en waar vervolgens na het klikken het megamenu wordt getoond.

Dat is een oplossing die werkt, maar die niet geheel in overstemming is, met wat de meeste bezoekers zullen verwachten. Want wanneer we naar de sites van Wehkamp en Coolblue kijken, dan zien we, dat bij het ‘hoveren’ over een menu item al een mega menu te zien krijgen. In mijn laatste voorbeeld zal ik je laten zien hoe je dat kan doen, maar laten we eerst die andere opties eens bekijken.

Welke oplossing je ook kiest, we hebben in ieder geval die basisnavigatiebalk nodig. En die kunnen we op een aantal manieren maken.

De meest ‘WordPress eigen’ manier is natuurlijk een WordPress menu aanmaken. Wanneer we dat doen, dan moeten we wel met een aantal zaken rekening houden.

De tweede manier is eigenlijk wel een heel makkelijke manier, want we kunnen namelijk ook gewoon knoppen gebruiken, die we naast elkaar zetten. Ook hier moeten we rekening houden met een aantal zaken, die ik verderop zal bespreken.

En de derde manier is een visueel fraaie manier. Gebruik je namelijk een ‘icon list’, dan kan je bij jouw menu items ook fraaie icoontjes plaatsen. Dat maakt het visueel net iets interessanter.

De mega menu panelen

Wanneer je een mega menu in Elementor maakt, dan is jouw ‘menu paneel’ eigenlijk gewoon een pop up. Bij deze pop up heb je overigens wel met een tweetal ’tricky’ zaken te maken.

Het eerste is de locatie waar je menupanel zal verschijnen. Je wilt natuurlijk dat dit pal onder je navigatiebalk zal komen te staan. Een standaard op up zal gecentreerd, links, rechts, boven of beneden uitgelijnd binnen je browser komen te staan. We moeten dus wat ’tweaken’ om alles netjes op zijn plaats te krijgen.

Het tweede ’tricky’ ding is dat mega menu’s prima werken op een desktop of laptop, ‘het ook nog wel aardig doen’ op een tablet, maar echt totaal onoverzichtelijk zijn op een mobiel. Voor een mobiel zal je dus voor een andere optie moeten kiezen.

Maar maak je geen zorgen, hiervoor staat ook al een blogartikel in de planning.

Voor mijn voorbeeld heb ik drie pop ups gemaakt, die alledrie dezelfde inhoud hebben, maar andere kopteksten. In de praktijk doe je dit natuurlijk anders.

De pop-up panels

Ik begin dus met het aanmaken van een pop-up. Afhankelijk van het aantal kolommen wat ik nodig heb, voeg ik aan de pop up een sectie toe met dat aantal kolommen. In mijn voorbeeld ga ik er uit van 5.

Vervolgens ga ik naar de settings van de pop up.

Voor de breedte heb ik een keuze uit twee mogelijkheden. Wanneer je kijkt naar het mega menu van CoolBlue, dan zie je dat het menu over de hele breedte van de pagina wordt getoond. Bij Wehkamp wordt het menu net zo breed getoond als de middelste tekstkolom.

Wil ik het menu net zo breed als de pagina hebben, dan geef ik bij ‘Breedte’ eerst aan, dat ik dit niet in ‘PX’, pixels wil hebben, maar in ‘VW’, ‘Viewport Width’ eenheden. De ‘Viewport’ is het scherm en een ‘VW’ eenheid is het percentage van de breedte van je ‘viewport’. In ons geval geven we dus 100 in.

Willen we het net zo breed als de tekst breedte hebben, dan -als je de standaard instellingen voor Elementor gebruikt- geef je de waarde ‘1140 PX’ in.

En vervolgens vullen we natuurlijk het popup menu in.

Afhankelijk van wat je er wilt hebben, kan je natuurlijk de ‘gewone’ menu opties van WordPress gebruiken, knoppen of zelfs zoek- of andere formulieren. Wat echter belangrijk is, is dat je de inhoud van je mega menu’s goed plant en goed nadenkt wat je waar wilt hebben. Wanneer je naar het screenshot hierboven van Cool Blue kijkt, dan zie je direct waar je moet zijn, wanneer je ergens naar op zoek bent. Maak de navigatie voor je bezoeker duidelijk en logisch.

Het gedrag

Bij jouw mega menu in Elementor is het belangrijk, dat het mega menu ook als een mega menu en niet als een pop up gedraagt. Dus we passen de instellingen van je pop up als volgt aan.

De ‘overlay’ en de ‘close’ button willen we niet gebruiken, dus dat zetten we uit (zie de afbeelding enkele paragrafen terug). We willen voor een wat ‘zachtere’ overgang mogelijk wel een ‘entrance animation’, maar dan niet al te revolutionair. Persoonlijk zou ik voor een fade-in en voor een exit animatie een fade out kiezen.

Hierboven zie je dus de eerste aanzet met de nodige widgets er alvast op geplaatst. De eerste twee kolommen zijn ‘nav menu widgets’. In plaats van de gebruikelijke horizontale oriëntatie heb ik hier een verticale oriëntatie opgegeven. Natuurlijk moeten we hier de tussenruimten nog kleiner maken.

De positionering

Een apart aandachtspuntje is de positionering. Standaard zal het megamenu namelijk midden op de pagina getoond worden. Dat is niet bepaald intuïtief, de bezoeker verwacht het onder de navigatiebalk te verschijnen. Om het ook netjes op die verwachte plaats te krijgen, moeten we een aantal stappen volgen.

Natuurlijk zou het het mooist zijn geweest, wanneer ik in Elementor zelf kon bepalen, waar ik het panel wil laten verschijnen, maar helaas. Daar hebben de makers niet aan gedacht. Ik kan alleen heel grofweg positie bepalen. Maar om het toch netjes onder de menubalk te laten verschijnen, kunnen we met enkele kleine trucs dit toch mogelijk maken.

Laten we beginnen met de achtergrond kleur. Wat we namelijk gaan doen, is de pop up zelf een transparante achtergrond geven, de achtergrondkleur laten we door de sectie bepalen.

Dus nog steeds in de instellingen voor de popup klikken we op de tab ‘Stijl’. Zoals je ziet, staat er geen achtergrond kleur ingesteld, dus de default kleur zal worden gekozen (Wit).

Dat willen we niet, dus we kiezen een willekeurige kleur, en vervolgens schuiven we de tweede schuifregelaar onder de knop helemaal naar links. Daardoor wordt de kleur transparant gemaakt…

Vervolgens stellen we de kleur in voor de sectie. We klikken dus op de sectie van de pop up en onder de stijl optie van de sectie stellen we de kleur in op de gewenste achtergrond kleur. In ons voorbeeld wit.

Nu gaan we terug naar de opties van de popup zelf en klikken op de button om het menu helemaal naar boven op de pagina te verplaatsen.

Nu ga je weer naar de sectie en hier geeft je onder ‘Geavanceerd’ de marge in, die je nodig hebt om jouw pop up op de juiste hoogte te plaatsen. Is jouw header bijvoorbeeld 200 pixels hoog, dan geef je ‘200’ in als top margin.

Vergeet niet op het schakeltje te klikken, zodat je inderdaad alleen de boven marge ingeeft.

Hierboven zie je dus een pagina met header en de pop up wanneer hij zichtbaar is. Begint er al aardig op te lijken, nietwaar?

We kunnen nu de popup opslaan. Bij het opslaan geef je aan, dat je hem op alle pagina’s wilt kunnen laden. Bij de volgende stap, het selecteren van de triggers die de pop up mogen activeren geef je niets in en ook bij de laatste pagina met instellingen geef je niets op.

Handig met templates

En zo maken we nog een aantal ‘mega menu’ panels, afhankelijk van hoeveel opties we in het topmenu hebben staan. Het makkelijkst is het natuurlijk om dit menu als een template op te slaan en daarna alleen de aanpassingen door te voeren die nodig zijn voor specifiek dat andere menu.

De pop up triggeren

We willen de pop up niet door de gebruikelijke triggers laten tonen, maar door het klikken van menu items of knoppen.

Zoals eerder aangegeven is er een aantal manieren waarop je het ‘hoofdmenu’ kan realiseren. Het meest voor de hand liggend is natuurlijk de standaard WordPress menu’s. Maar dat is in principe toch de meest bewerkelijke optie, dus ik wil eerst even twee andere mogelijkheden aanbieden.

Dit menu gaat naar de knoppen

Eén optie is om in het menu knoppen te plaatsen. Sleep je echter een knop naar een sectie toe, dan zal die netjes in de sectie komen te staan. Sleep je er een tweede knop naar toe, dan zal die onder de eerste komen te staan.

Dat wil je vast niet. Nu kan je natuurlijk voor ieder menu item in het hoofdmenu een aparte kolom maken, maar wanneer je dan het browservenster verschuift, dan zal het menu zich vreemd gedragen.

Wanneer je widgets plaatst in een sectie of kolom en je geeft bij alle widgets in die sectie of kolom onder ‘Geavanceerd / Positionering bij de Breedte de waarde ‘Inline (auto)’ aan, dan zullen die widgets naast elkaar geplaatst worden op een vergelijkbare manier hoe een tekstverwerker de tekst plaatst. Is de regel vol, dan gaat hij door op de volgende regel.

De widgets worden pal tegen elkaar geplaatst, dus je zal enige marge aan de linker en rechter zijde toe moeten voegen, om wat afstand te houden.

Tenslotte moet je door een ‘Dynamic Action’ te gebruiken de pop up laten activeren door een klik op de knop. Hoe je dat doet heb ik eerder beschreven in mijn artikel over action buttons in Elementor. Het enige wat je dus hoeft te doen is onder de knop een actie toe te voegen, die een pop up opent.

Een icon list menu

Een andere goede keuze voor een mega menu in Elementor is om een icon list als hoofdnavigatie voor je menu te gebruiken. Standaard zullen de items onder elkaar geplaatst worden, maar je kan vrij eenvoudig de iconen naast elkaar… het is vrijwel de eerste optie in je instellingen.

Het koppelen van jouw iconen met de pop up panels voor je mega menu doe je op eenzelfde manier als hierboven besproken voor de knoppen. Met behulp van de ‘action buttons’.

Standaard WordPress menu’s

Wanneer je gebruik wilt maken van standaard WordPress menu’s dan heb je nog een tweede plugin nodig. Een plugin die ik je overigens sowieso aan kan raden wanneer je met Elementor Pro werkt.

Want zoals je waarschijnlijk weet kan je niet zomaar ieder klikbaar item ook direct een pop up laten tonen. Daarvoor moet er namelijk een ‘Dynamic Data’ koppeling in het property veld van je Elementor widget voorkomen. En helaas is dat niet overal het geval. Gelukkig heb ik al een hele tijd terug beschreven hoe je dat met behulp van een heel handige widget toch kan doen.

Hoe je dit precies doet staat zeer uitgebreid in het artikel beschreven.

Maar dat is niet wat we zoeken!

Maar dat ziet er allemaal natuurlijk heel leuk uit, maar dat is eigenlijk niet wat we zoeken! Want voor al deze opties moet je eerst klikken op een item in het hoofdnavigatie menu, en dat is nu juist iets wat je niet wilt!

In het tweede deel van dit artikel, wat later deze week zal verschijnen, laat ik je zien hoe je ervoor zorgt, dat ‘on hover’ jouw menu panel al zichtbaar wordt.

Doe je het liever niet zelf?

Sommige mensen bakken graag appeltaart, anderen kopen er liever één bij de bakker. Wil je wel graag een WordPress website, maar zie je al dat zelfbouwen niet zitten, dat hoeft gelukkig ook niet. WordXPression bouwt al meer dan 10 jaar websites voor ondernemers. Of jij nu een ‘gewone website’, een budget website, een online leeromgeving of een webshop zoekt, je bent hier op het juiste adres. Bovendien heb je optioneel de mogelijkheid om je website door WordXPression met performance garantie te laten hosten. Is jouw website in een bepaalde maand niet snel genoeg, dan krijg je een maand gratis hosting. Dat moet je toch een goed gevoel geven.