Met megamenu's kunnen gebruikers meer links in één keer zien zonder te hoeven scrollen, zweven en onthouden inhoud uit uw menukaart. De beste manier om over megamenu's na te denken is dat het vervolgkeuzemenu's binnen vervolgkeuzemenu's zijn.

Dus in plaats van je normale vervolgkeuzemenu dat een submenu toont wanneer je de muisaanwijzer over je hoofd-bovenliggende links in je navigatiebalk beweegt, kun je met een megamenu extra bovenliggende links en submenu's in het vervolgkeuzemenu hebben.

Een megamenu toevoegen aan uw navigatiebalk

Log in op uw WordPress-dashboard en navigeer naar Uiterlijk> Menu's .

wordpress menu divi.png

Maak een menu met vier bovenliggende koppelingen waarbij elk van de bovenliggende koppelingen zijn eigen submenu-koppelingen heeft. In het onderstaande voorbeeld voeg ik drie submenu-items toe onder elk van de vier bovenliggende menukoppelingen.

menu divi.png

Maak een extra link om als megamenu-link te dienen. Voor het onderstaande voorbeeld noem ik deze link "Main". Sleep vervolgens de twee bovenliggende menukoppelingen (elk met hun submenukoppelingen) onder de hoofdlink.

Om je Megamenu aan te maken, moet je een speciale CSS-klasse toevoegen aan de hoofdlink op het hoogste niveau, genaamd "Main". U kunt dit doen door op de link voor schermopties bovenaan uw pagina te klikken en ervoor te zorgen dat de CSS-klasseoptie is aangevinkt.

css klassen divi.png

Ten slotte moet u een CSS-klasse toevoegen aan de "Main" -link die u zojuist hebt gemaakt. Klik op de pijl rechts van het "Hoofd" menu-item om aanvullende configuratie-opties te wisselen. Zoek het tekstvak met de titel CSS-klassen en voer de klasse "mega-menu" in.

mega menu divi.png

Wanneer u nu uw pagina opnieuw laadt, kunt u zien dat alle vorige menu's in het gigantische menu zijn geplaatst onder deze link, het Mega Menu.

mega menu divi example.png

Dat is alles voor deze tutorial, ik hoop dat je hiermee een megamenu kunt maken op Divi in alle eenvoud.