Home Kennisbank Menu's & footer Hoe stel ik een mega menu in?

Hoe stel ik een mega menu in?

Robert Oosterloo
Bijgewerkt op · 3 min lezen

Heb je veel pagina’s onder één menu-item, zoals al je diensten, dan wordt een gewoon uitklapmenu lang en onoverzichtelijk. Een mega menu klapt breed uit en zet de links in kolommen met een kop erboven. Je maakt het in drie stappen.

In het kort

  • Bouw in je menu drie niveaus: hoofditem, kolomkoppen en links.
  • Klap het hoofditem open en zet Mega menu activeren aan.
  • Elk item op het tweede niveau wordt een kolom met een vette kop.
  • Op mobiel is het mega menu een gewoon uitklapmenu.

Hoe werkt een mega menu?

Een mega menu is een uitklapmenu over de volle breedte van de header. Het werkt met de gewone menustructuur in Menu’s:

  • Niveau 1: het item in de menubalk, bijvoorbeeld ‘Diensten’.
  • Niveau 2: elk item wordt een kolom. De tekst is de vette kop van de kolom.
  • Niveau 3: de links onder die kop.
Een geopend mega menu onder Diensten met drie kolommen: Websites, Hosting en onderhoud, en Marketing, elk met drie links eronder; de kolommen zijn genummerd en rood omkaderd
Elk item op het tweede niveau wordt een kolom met een vette kop.

Nog geen website op leflite?

Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.

  • Online binnen een week
  • Hosting, SSL en back-ups inbegrepen
  • Vanaf €49,95 per maand
Website van Inspirare Coaching op een laptop

Stap 1: Bouw de structuur in drie niveaus

Ga naar Menu’s en open je hoofdmenu. Zet onder het hoofditem eerst de kolomkoppen als subitem. Zet daaronder de links, nog een stap verder naar rechts ingesprongen. Hoe slepen en inspringen werkt, lees je in het hoofdmenu aanpassen.

Een kolomkop hoeft geen echte pagina te zijn. Gebruik een Aangepaste link met als URL # als de kop nergens naartoe hoeft te linken.

Stap 2: Zet Mega menu activeren aan op het hoofditem

Klap het hoofditem (niveau 1) open met het pijltje rechts. Zet Mega menu activeren aan. De uitleg erbij is: ‘Activeer uitklappend mega menu voor dit item’.

Deze optie zie je alleen bij menu’s op de locatie Primaire menu (of Primair menu 1 en 2) en Onder menu. In het mobiele menu, de topbar of de footer bestaat geen mega menu.

Een opengeklapt hoofditem in de menustructuur met de schakelaar Mega menu activeren rood omkaderd, en daaronder de ingesprongen kolomkoppen en links
Zet Mega menu activeren aan op het hoofditem, niet op een kolomkop.

Stap 3: Sla op en bekijk het resultaat

Klik op Menu opslaan. Ga op je website met de muis over het hoofditem. Het mega menu klapt uit over de breedte van de header.

Hoeveel kolommen?

Er is geen instelling voor het aantal kolommen of hun breedte. Elk item op niveau 2 wordt een kolom, en de kolommen verdelen de ruimte. Drie of vier kolommen lezen het prettigst. Heb je er meer nodig, voeg dan groepen samen. Afbeeldingen, beschrijvingen of een knop in het mega menu kunnen niet via de instellingen. Dat is maatwerk: neem contact met ons op.

Op mobiel

Het mobiele menu is een apart menu, met gewone uitklapmenu’s. Wil je dezelfde indeling op mobiel, bouw dan in het mobiele menu dezelfde niveaus. Op mobiel klapt elk niveau open met de knop met het pijltje. Zie het menu op mobiel instellen.

Tip: gebruik je twee menu’s in de menubalk? Dan kan elk hoofdmenu een eigen mega menu hebben. Lees hoe je de menubalk indeelt.

Lukt het niet?

  • Je ziet de optie Mega menu activeren niet. Het menu staat niet op de locatie Primaire menu of Onder menu. Controleer de locatie bij Menu instellingen.
  • Je ziet een gewoon uitklapmenu. De optie staat aan op een kolomkop in plaats van op het hoofditem, of je hebt niet opgeslagen.
  • De kolommen hebben geen links eronder. De links staan op niveau 2 in plaats van niveau 3. Spring ze nog een stap verder in.
  • Het mega menu staat niet op je telefoon. Op mobiel zie je het mobiele menu. Bouw daar dezelfde structuur.
  • Kom je er niet uit? neem contact met ons op.

Deel dit artikel

Robert Oosterloo

Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.

Lees ook

Ook zo’n website?

Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.

Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een .