OPMERKING: dit is alleen beschikbaar in het hoofdmenu. Als je dit voor andere menu’s doet, kan dit onverwachte resultaten opleveren.
Een eenvoudig megamenu maken
We hebben je het zo gemakkelijk mogelijk gemaakt om een eenvoudig megamenu binnen het thema zelf op te zetten door klassen te gebruiken. Allereerst moet je een nieuw menu maken. Ga naar Dashboard> Uiterlijk> Menu’s. Klik bovenaan op Schermopties en zorg ervoor dat de optie CSS-klassen is ingeschakeld. Als dit niet het geval is, zorg er dan voor dat je het inschakelt. Ga naar beneden en klik op een nieuw menu maken.
Elementen anatomie
We hebben specifieke klassen gestileerd zodat de gebruiker prachtige menu’s rechtstreeks vanaf het dashboard kan maken. Deze klassen worden hieronder vermeld, samen met de relevante voorbeelden.
– neve-mega-menu – deze klasse fungeert als een wrapper voor het megamenu.
–neve-mm-col – deze klasse is een wrapper voor de kolommen van het menu. De inhoud wordt niet getoond, dit is slechts een wikkel.
– neve-mm-heading – Stijlt het item als kop. De inhoud wordt getoond en kan ook een link hebben.
We hebben ook een element genaamd divider. Je kan er een invoegen tussen uw menu-items door simpelweg een menu-item toe te voegen met de linkwaarde # en met de titelverdeler.
Link beschrijvingen verschijnen ook. Dus alles wat je invoegt in het veld “Beschrijving” van het menu-item, wordt er direct onder weergegeven.
Het menu aanmaken
Deze functionaliteit kan tot veel meer worden uitgebreid, maar voor demonstratiedoeleinden gaan we het bovenstaande voorbeeld reproduceren.
Het basisitem
Allereerst gaan we het basis-element voor het menu toevoegen. Klik op Custom Links en gebruik # voor de URL en Menu voor de linktekst. Klik vervolgens op Toevoegen aan menu.
Zorg ervoor dat nadat je het item aan het menu hebt toegevoegd, je de class “neve-mega-menu” eraan toevoegt, net als in de onderstaande afbeelding.
De kolommen
Nu we ons basis-element hebben ingesteld, zullen we de vier kolommen aan ons menu toevoegen. Ga je gang en voeg vier aangepaste links toe aan het menu. De URL moet # zijn en de linktekst moet suggestief zijn – onthoud dat deze in het dashboard verschijnen, maar niet aan de voorkant van de site, omdat het slechts wrappers zijn. Ik ga ze kolom 1, kolom 2, kolom 3 en kolom 4 noemen.
Zorg ervoor dat je de klasse neve-mm-col aan alle vier toevoegt, net zoals we deden voor het hoofditem. En sleep ze vervolgens onder het hoofditem van het menu. Als je dit goed hebt gedaan, zou je moeten eindigen met iets dat lijkt op de afbeelding hieronder.
Koppen (optioneel)
Houd er rekening mee dat koppen ook een link kunnen hebben, maar dit is niet verplicht. Ze kunnen ook als presentatiemiddel worden gebruikt. Als je niet wilt dat ze als links fungeren, moet je ervoor zorgen dat ze naar # verwijzen.
Ga je gang en maak nog vier menu-items die als headers zullen fungeren: stoelen, tafels, kasten en spiegels. Ik wil ze nergens aan linken, dus ik zal gewoon # als URL toevoegen. Zorg ervoor dat je “neve-mm-heading” toevoegt onder CSS-klassen voor elk van hen en plaats ze in de eerder gemaakte kolommen. Je zou naar zoiets als in de onderstaande afbeelding moeten kijken.
Dividers (optioneel)
Ik ga dividers toevoegen onder elk van de kopjes. Houd er rekening mee dat deze overal kunnen worden toegevoegd en niet alleen onder de kopjes.
Het toevoegen van een scheidingslijn/divider is net zo eenvoudig als het toevoegen van een aangepast link-item, door naar # te wijzen met de link-tekstverdeler.
Basis menu-items
Basismenu-items kunnen worden toegevoegd, net als bij een normaal menu. Het enige dat je moet doen, is ze als sub-item van de kolommen maken. Na het toevoegen van enkele items, krijgen we dit aan de voorkant en de uiteindelijke menustructuur:
