Ken je dat, van die menu’s op websites die helemaal uitklappen tot een groot vlak met meerder kolommen met menu-items wanneer je eroverheen hovert met je muis? Bol.com heeft dat bijvoorbeeld. Maar op mijn eigen blog Ecohobbit heb ik dat ook. In deze blog leg ik je uit wat een mega menu is, wanneer het handig is en hoe je het instelt.
Wat is een mega menu?
Een mega menu is uitgebreider dan een simpel submenu. Waar je bij een normaal submenu één kolom met opties krijgt onder het hoofdmenu-item wat je aanwijst of aanklikt, geeft het mega menu je de optie om onder één hoofdmenu-item meerdere kolommen te hangen, met koppen, en soms zelfs met losse producten of afbeeldingen als je het heel fancy wil doen.
De voordelen van een mega menu
Op de juiste manier uitgevoerd geeft het je een goed gestructureerd overzicht bij heel veel keuzeopties, zonder dat het in eerste plaats veel ruimte inneemt in je header.
Bij Bol.com is alles bijvoorbeeld netjes onderverdeeld in de hoofditems “categorieën”, “cadeaus & inspiratie” en “aanbiedingen”. Op Ecohobbit heb ik een onderverdeling gemaakt tussen “duurzaam leven” en “duurzaam reizen”. In beide gevallen vergemakkelijkt het mega menu het zoeken.
Waarom zou je een mega menu gebruiken?
Het is vooral handig als je een uitgebreide hiërarchie op je website hebt. Bijvoorbeeld een blog met veel categorieën / tags of een grote webshop. Wanneer je een kleine, eenvoudige website hebt, voegt het niet echt wat toe.
Op Ecohobbit zijn mijn artikelen bijvoorbeeld verdeeld in 9 categorieën die weer zijn onderverdeeld met 101(!) tags. De categorieën zijn redelijk algemeen, zoals “DIY”, “Food”, “Natuurbeleving”. Maar een blogpost kan ook een handvol tags meekrijgen. Een willekeurig recept op mijn blog kan bijvoorbeeld tags meekrijgen over de soort maaltijd (bijvoorbeeld brunch of snack), maar ook het soort recept (conserveren, veganistisch, etc).
In mijn goed uitgedachte menu geef ik een overzicht van beide lijstjes, zodat mijn bezoeker makkelijk kan vinden wat hij zoekt.
Zo maak je een mega menu
Ik gebruik als WordPress thema Astra Pro, en die heeft de functie ingebouwd.
1 – Maak een overzicht van je categorieën en tags
(Of productcategorieën en manieren om je producten te sorteren.) Dit kan gewoon door naar de achterkant van je site te kijken, door er een lijstje van te maken, of door ze op post-its te schrijven. Whatever jij fijn vindt.
2 – Sorteer je opties
Maak logische groepjes van tags, die je onder een bepaalde kop kunt hangen. Die kop kun je los verzinnen, het kan een categorie zijn, of een overzichtspagina. Of een andere overkoepelende tag. Zo heb ik onder “duurzaam reizen” (categorie) een mega menu hangen met daarin onder andere een kop “lange afstandspaden” (tag) met daaronder de specifieke tochten die ik heb gelopen en waar ik over heb geschreven (ook tags).
Schuif met je post-its (of wat je ook maar gebruikt) tot je tevreden bent – of als je al een idee hebt, teken het uit op een groot vel papier. Check je lijst uit stap 1 om ervoor te zorgen dat je niks vergeet.
3 – Maak het menu in de menu editor
Andere dingen die je kunt doen met het Astra Pro mega menu
Astra Pro
Zelf heb ik ervoor gekozen om dit in Astra Pro te doen – mijn favoriete WordPress thema. Lichtgewicht, flexibel, en met een aantal heel fijne toegevoegde functies, zoals deze mega menu optie. Helaas zit deze functie niet in de gratis versie van het thema.
Omdat het al in het thema verwerkt zit, is het heel efficiënt gecodeerd, wat gunstig is voor je sitesnelheid en daarmee je technische SEO.
Budget optie
Wil je liever geen geld uitgeven aan een licentie? Of heb je een ander thema dan Astra? Dan zijn er een aantal plugins die deze functie aan je WordPress website kunnen toevoegen:
Houd er rekening mee dat deze net wat anders werken dan hierboven beschreven, en mogelijk ook niet alle uitgebreide designopties hebben.