Een megamenu is een navigatiepunt dat bij aanraking geen smalle lijst uitklapt, maar een breed vlak met meerdere kolommen, afbeeldingen of aanwijzingen. Bij webshops en grote websites is dat zinvol. Bij kleine bedrijfssites is het meestal een teken dat de structuur niet klopt.
Daarom hier allebei: de uitvoering, en vooraf de eerlijke vraag of u er wel een nodig hebt.
Hebt u er eigenlijk wel een nodig?
Een megamenu loont vanaf ongeveer vijfentwintig tot dertig bestemmingspagina's die zich zinvol in groepen laten ordenen — een webshop met veel categorieën, een opleider met een breed cursusaanbod, een fabrikant met meerdere productlijnen.
Bij een website met acht pagina's is het een doel op zich. Als u een megamenu inzet om acht punten over een groot vlak te verdelen, oogt dat niet professioneler, maar besluiteloos.
En als u het gevoel hebt dat uw navigatie zonder megamenu niet past — dan hebt u geen menuprobleem, maar te veel pagina's. De betere weg is dan om inhoud samen te voegen, niet om de navigatie te vergroten.
Uitvoering met Elementor
Elementor Pro heeft sinds enige tijd een eigen megamenu-widget. Dat is de eenvoudigste weg, omdat menustructuur en vormgeving op één plek liggen.
Elementor Pro: De megamenu-widget en de Theme Builder waarin u hem inzet, horen bij de Pro-versie. Bekijk Elementor Pro
De werkwijze:
- Het menu zelf maakt u zoals gewoonlijk aan onder Weergave → Menu's. De structuur — hoofdpunten en subpunten — ontstaat daar, niet in Elementor.
- In de Theme Builder opent u uw koptekstgedeelte; hoe dat ontstaat, leest u in Theme Builder voor header en footer.
- U plaatst de megamenu-widget en kiest het menu.
- Voor elk hoofdpunt dat een groot vlak moet krijgen, ontwerpt u de uitklappende inhoud direct in de editor — met containers, tekst, afbeeldingen, knoppen.
Het uitklappende gedeelte is een gewoon Elementor-gebied. Dat betekent: alles wat u anders kunt bouwen, kan hier ook. Precies daarin schuilt de verleiding om te overdrijven.
Een opbouw die zich bewezen heeft
Drie tot vier kolommen, elk met een korte kop en daaronder vier tot zes links. In de laatste kolom iets visueels — een afbeelding, een verwijzing naar een actuele aanbieding, een contactknop.
Wat ik vermijd: meer dan vier kolommen, meer dan ongeveer acht links per kolom, en afbeeldingen bij elke afzonderlijke link. Een menu dat u eerst moet lezen, heeft zijn doel gemist — het moet oriëntatie bieden, geen inhoud overbrengen.
Het onderdeel dat het vaakst misgaat: de telefoon
Een megamenu is een desktopverschijnsel. Op een telefoonscherm is er geen breed vlak om uit te klappen.
Zorg ervoor dat er mobiel een eenvoudige, gestapelde lijst verschijnt — hoofdpunten aantikbaar, subpunten daaronder uitklapbaar. De afbeeldingen en extra elementen uit de desktopweergave horen mobiel verborgen te zijn.
Controleer daarbij drie dingen op een echt apparaat: is elk punt met de duim te raken? Komt u er weer uit zonder de pagina opnieuw te laden? En laat de lijst zich scrollen als hij langer is dan het scherm? Dat laatste punt wordt het vaakst over het hoofd gezien — bij een lang menu zijn de onderste items anders simpelweg niet bereikbaar. Mijn aanpak daarvoor: Elementor mobiel optimaliseren.
Bedienbaarheid
Twee punten die vaak worden vergeten.
Toetsenbordbediening. Het menu moet met de tabtoets te doorlopen zijn, en het uitgeklapte gedeelte mag niet meteen weer dichtklappen. Controleer dat één keer — het kost een minuut.
Uitklappen met vertraging. Een gedeelte dat bij de kleinste muisbeweging open- en dichtspringt, is onaangenaam. Een korte vertraging van ongeveer 150 milliseconden maakt het gedrag duidelijk rustiger.
Laadtijd
De uitklappende inhoud wordt meegeladen, ook als niemand hem opent — en wel op elke pagina, omdat hij in het koptekstgedeelte zit. Een megamenu met twaalf afbeeldingen vertraagt daarmee de hele website.
Houd de afbeeldingen klein en spaarzaam. Wat dat voor de meetwaarden betekent, leest u in Elementor en Core Web Vitals.
Het alternatief dat vaak beter is
In plaats van een megamenu: een slank hoofdmenu met vijf tot zeven punten en daarachter goed gebouwde overzichtspagina's die de diepte in leiden.
Dat is meestal de betere oplossing — voor de bezoekers, omdat de oriëntatie duidelijker is, en voor de zoekmachine, omdat een overzichtspagina met verklarende tekst kan ranken, een menu niet.
Als u niet zeker weet welke structuur bij uw website past, is dat een van de vragen die we in mijn Elementor-training vroeg ophelderen — voordat u tijd steekt in een navigatie die het eigenlijke probleem niet oplost.
Tags