Creating Mega Menus In Divi

Mega-menu’s stellen gebruikers in staat om meer links tegelijk te zien zonder het gedoe van scrollen, zweven en het onthouden van de inhoud van uw menu. Een goede manier om aan Mega Menu’s te denken, is dat het dropdown-menu’s zijn in dropdown-menu’s. Dus in plaats van uw normale vervolgkeuzemenu dat een submenu toont wanneer u over uw hoofdouderlinks in uw navigatiebalk zweeft, kunt u 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 ga naar Vormgeving> Menu’s .

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

Maak een extra link om te dienen als uw megamenu-link. Voor het onderstaande voorbeeld noem ik deze link “Functies”. Sleep vervolgens de vier bovenliggende menukoppelingen (elk met hun submenu-koppelingen) onder de koppeling Functies.

Om uw Megamenu te maken, moet u nu een speciale CSS-klasse toevoegen aan de hoofdlink bovenaan ‘Functies’. U kunt dit doen door te klikken op de link naar schermopties bovenaan uw pagina en ervoor te zorgen dat de optie CSS-klasse is aangevinkt.

Ten slotte moet u een CSS-klasse toevoegen aan de link ‘Functies’ die u zojuist hebt gemaakt. Klik op de pijl rechts van het menu-item “Functies” om tussen de extra configuratie-opties te schakelen. Zoek het tekstvak met het label CSS Classes en voer de klasse “mega-menu” in.

Als je nu je pagina opnieuw laadt, kun je zien dat al die vorige menu’s in één gigantisch menu zijn geplaatst onder deze ene link, het Mega Menu.