Nogmaals Mega Menu’s

Mega menu’s die doen wat je verwacht!

In mijn eerdere blogartikel over mega menu’s in Elementor heb ik je laten zien je je eenvoudig een mega menu aan je header toe kan voegen. Eén nadeel bij deze methode is echter, dat het wel een eenvoudige methode is, maar dat het menu zich niet helemaal gedraagt zoals jij graag zou willen. Het grootste probleem is, dat je van mega menu’s verwacht dat ze eigenlijk ‘spontaan’ zichtbaar worden, wanneer je hovert over een menuoptie. En in de voorbeelden die ik in mijn vorige artikel heb gegeven, zal je toch eerst zelf moeten klikken. Een extra actie, waar je bezoeker mogelijk niet op zit te wachten.

Dit kan eenvoudiger, maar hiervoor moet je wel met JavaScript aan de slag gaan. En dat kan voor velen toch een extra uitdaging zijn.

Er bestaat een tweetal manieren om de JavaScript fragmenten die je aan je website toevoegt te implementeren. Mijn persoonlijk advies is om dit te doen via de relatief nieuwe ‘Custom Code’ functie in Elementor. Maar ook de ‘ouderwetse manier’ door JavaScript tags toe te voegen in een HTML widget zal werken. Bedenk alleen wel, dat je die HTML widget in de header van je site moet zetten, niet in de pagina, omdat het menu ook in de header zal staan.

Even als de voorbeelden in de mega menu’s in het eerste artikel, hebben ook alle menu’s die we hier gaan bouwen Elementor Pro nodig.

Verplichte lectuur

Om dit artikel goed te kunnen begrijpen is het noodzakelijk, dat je in ieder geval mijn vorige artikel over mega menu’s in Elementor hebt gelezen. Dan weet je namelijk wat de methode is, die ik heb gebruikt om die menu panels aan te maken.

De voorbereidingen

Het eerste wat je nodig hebt voor je mega menu’s zijn de shortcodes van de pop up panels. Die vind je door naar het ‘Templates’ menu net onder het ‘Elementor’ menu in je Dashboard te gaan en binnen dat ‘Templates’ menu te kiezen voor ‘Pop ups’. Op je scherm krijg je dan iets als het volgende te zien :

En waar het mij hier nu om gaat is de ‘shortcodes’ die je nodig hebt om je pop up’s zichtbaar te maken. Deze willen we namelijk gebruiken in het stukje JavaScript wat we nodig hebben.

In die shortcodes kan ik namelijk zien, dat de ID’s van de formulieren die ik heb 206 en 207 zijn.

Een tweede punt wat ik zal moeten controleren in de ‘Display Conditions’ van deze pop ups is of deze wel zichtbaar zijn op alle relevante pagina’s. Dus alle pagina’s waarop ik het mega menu wil gebruiken. Je ziet dat één pop up, omdat hij nog op ‘Concept’ staat niet aan die eis voldoet. Voor de andere zie ik in de kolom ‘instances’ that hij beschikbaar is voor de ‘Entire Site’. Dat zit dus wel snor!

Maar laten we voor het voorbeeld even net doen alsof 206 en 207 allebei over de hele site beschikbaar zijn.

De elementen identificeren

We hebben nu bepaald wat er getoond moet worden, maar nog niet wanneer het getoond moet worden. Dat moet dus wanneer we in onze mega menu’s over een bepaald element heengaan met de muis. Die elementen moeten we natuurlijk ook identificeren. En dat doen we door een bepaalde ‘class’ toe te voegen aan zo’n element.

Een ‘class’ is eigenlijk een groepering van ‘eigenschappen’ die een element in een webpagina moet krijgen. Meestal hebben we het hier over visuele eigenschappen als kleur en zo maar via JavaScript kunnen we ook het gedrag van zo’n element aanpassen.

Wanneer we voor de mega menu’s gebruik maken van een ‘knoppen menu’ is het toekennen van een class per knop eigenlijk heel eenvoudig. Wanneer we gebruik maken van een ‘iconlist’ wordt het wat complexer. Dit omdat Elementor je wel toestaat een ‘class’ per knop toe te voegen, maar bij een ‘iconlist’ is dat niet mogelijk.

Gebruik je eenzelfde oplossing voor een iconlist, wordt de code eigenlijk wel heel complex. Bovendien, zodra je zou besluiten een nieuw item in het hoofdmenu te willen toe- of tussenvoegen, zal die code aangepast moeten worden. We slaan de iconlist dus over in onze voorbeelden voor mega menu’s. Stel je er echter toch heel veel prijs op, laat het even weten in de commentaren hieronder. Wellicht dat ik bij voldoende interesse nog een ander artikel in deze reeks zal schrijven.

Met een ‘klassiek’ WordPress menu is het weer aardig eenvoudig geworden. Maar laten we eerst eens kijken, hoe het met de knoppen moet.

Het ‘knoppen menu’

Eigenlijk slaat het natuurlijk nergens op, wanneer je een knop, een interface element bedoeld om op te klikken, de belangrijkste actie op een ‘mouse over’ event laat verrichten. Maar voor het voorbeeld is het wel heel makkelijk.

In het veld ‘CSS-classes’ moet ik een naam voor de class invullen die ik wil gaan gebruiken.

Dat kan natuurlijk eenvoudig ‘menu-1’, ‘menu-2’ etc. zijn, maar er zijn twee goede redenen om dat niet te doen.

Allereerst is dat wel een heel voor de hand liggende naam, en de kans dat een andere plugin op eenzelfde idee zou komen voor een class name voor een menu is redelijk groot. Het is daarom altijd verstandig om voor je eigen classes een ‘prefix’ te zetten. 2-3 letters die het allemaal wat unieker maken. Iets als ‘wxp-menu-1’ voor WordXPression. Of indien jouw bedrijf ‘Mijn Cool Bedrijf’ heet, mcb-menu-1.

Een tweede reden om het niet te doen is dat ‘menu-1’ wel heel weinig zegt. In het codevoorbeeld zal ik ‘wxp-menu-1’ (en verder) gebruiken, maar in de praktijk, indien bijvoorbeeld het eerste panel dameskleding en het tweede herenkleding toont, ligt ‘wxp-menu-dames’ en ‘wxp-menu-heren’ meer voor de hand.

Mocht er in het veld ‘classes’ al iets staan, dan kan je jouw extra class er gewoon achter voor voor zetten. Zet er geen komma tussen, maar gewoon een spatie. Dus niet :

bestaande-class, wxp-menu-1

maar

bestaande-class wxp-menu-1

Denk erom, dat iedere menuknop in het hoogste level van onze mega menu’s zijn eigen class name moet krijgen.

Het WordPress menu

Wanneer je een WordPress menu gebruikt is het iets ingewikkelder. Maar nog steeds prima uit te voeren. We gaan eerst naar de menu editor toe onder ‘Weergave -> Menu’s’.

Daarna gaan we naar de tab ‘Schermopties’ rechts boven in je pagina. Klik je daarop zie je ongeveer het volgende :

Het is hier zaak, dat de optie CSS-classes staat aangevinkt.

Dan gaan we naar het menu zelf toe en klikken op de eerste menuoptie

Hier zijn twee dingen van belang. Het eerste is dat in het veld ‘URL’ een ‘hashtag’ # komt te staan. Het tweede dat er in het veld CSS class een naam voor een class wordt ingevuld. Hier gelden dezelfde regels die ook bij de knop die hierboven besproken werd gelden.

Iedere menuoptie geef je natuurlijk een aparte class name.

Coding ahead! JavaScript

Nu moeten we een stukje JavaScript code toe gaan voegen. Zoals ik heb aangegeven, kan dat op twee manieren. Via de HTML widget van Elementor of via de ‘Custom Code’. Omdat de ‘nette manier’ toch de custom code is, zal ik in mijn voorbeeld gebruik maken van deze methode. Het zorgt ervoor, dat de code ook op een ‘nette plaats’ in het HTML document komt te staan. Iets wat bijvoorbeeld Google ook best weet te waarderen.

We klikken in het Dashboard menu dus op ‘Elementor-> Custom Code’ en voegen een nieuwe custom code toe.

Nu kun je dit eigenlijk op verschillende manieren oplossen. De mooiste manier is alles in één bestand plaatsen. Heb je wat minder ervaring met JavaScript dan is dat echter wat lastiger te onderhouden.

De tweede manier is door voor iedere menu koppeling een apart ‘custom code’ fragment te maken. Dit is wat ik in dit voorbeeld zal laten zien.

Ik noem het eerste codefragment bijvoorbeeld -omdat het een koppeling voor ‘menu 1’ tot stand brengt ‘Menu koppeling menu 1’. Heet jouw menu eigenlijk ‘Damesmode’, noem dan vooral jouw codefragment ‘Menu koppeling Damesmode’. Mocht je ooit de volgorde veranderen, raak je niet in de war.

Dan volgt de code zelf. Weet je nog? Ons menu item heeft de class ‘wxp-menu-1’ en het mega menu panel wat ik wil koppelen heeft ID 206.

<script>
document.addEventListener('DOMContentLoaded', function() {
   let elements = document.querySelectorAll('.wxp-menu-1'); /*voeg hier je eigen class toe*/
   let popupposts = ['206']; /*pas dit met je eigen code aan*/

   elements.forEach(function(e,i) {
      e.addEventListener('mouseenter',function() {
         elementorProFrontend.modules.popup.showPopup( {id: popupposts[i] } );
      } );
      e.addEventListener('mouseleave', function() {
         jQuery('body').click();
      } );
   } );
} );
</script>

Vergeet niet de code aan te passen!

In bovenstaande code zie je twee stukken Nederlandse tekst tussen /* en */ tekens. Dat is commentaar. Op deze plaatsen moet je een aantal zaken vervangen met jouw eigen waarden.

Let ook even op : We noemden de class wxp-menu-1, maar in onze JavaScript code staat er ineens een punt voor de naam. Dit doen we om aan JavaScript te vertellen, dat het een class is.

Waarschuwingen

Hierboven zie je nog even wat de instellingen moeten zijn. Je geeft je code dus een ‘naampje’ ‘Menu koppeling menu 1’ of iets dergelijks. Je zorgt ervoor, dat de code aan het einde van de body wordt getoond en dan kan je de code publiceren.

Maar de oplettende lezer, zal merken, dat er een drietal uitroeptekens voor de code regels staan. Dat kan nooit goed zijn!

Jawel hoor. Wanneer je met je muis over deze waarschuwingen gaat, vertellen de eerste twee uitroeptekens je, dat ‘let’ een commando is wat pas sinds JavaScript ES:6 bestaat. Dus ‘pas’ sinds 2015. Iemand die zes jaar lang nooit een browserupdate heeft gedaan zou mogelijk jouw mega menu’s niet te zien krijgen. Maar die zou heel wat meer niet te zien krijgen, omdat de meeste websites er toch wel op vertrouwen, dat jouw browser deze versie van JavaScript wel zal begrijpen.

De laatste waarschuwing vertelt, dat het ‘elementorProFrontend’ object onbekend is. Dat klopt. We zitten namelijk niet in Elementor en zoals de naam al doet vermoeden, werkt ‘elementorProFrontend’ alleen aan de frontend van Elementor.

Geen reden om je zorgen te maken dus. Krijg je andere waarschuwingen te zien, of zelfs ‘rode balletjes’, dan heb je toch iets verkeerd overgetikt of gekopieerd. Kijk dan nog eens goed de oorspronkelijke code na.

En dit slaan we op. In de volgende stap wordt gevraagd, waar we dit codefragment willen laden. In mijn voorbeeld is het op de hele site, maar eigenlijk wil je, dat dit wordt geladen op alle pagina’s waar ook je header wordt geladen. Dus heb je op bepaalde pagina’s andere headers, dan sluit je deze uit. Scheelt weer in het laden van overbodige code.

En dat herhalen we.

Nu maken we nog zo’n code fragment aan voor ‘wxp-menu-2’ en 207, en indien we nog meer panels hebben wellicht ook voor ‘wxp-menu-3’ en 208… of wat de andere nummers voor de pop up panels maar zouden zijn.

En nu testen

En de laatste stap is natuurlijk testen of het werkt. Werkt het niet? Wanneer je in Chrome de toetsen CTRL-SHIFT-I indrukt, dan komt de ‘Inspector’ in beeld. Klik je hier op de tab ‘Console’, dan zie je eventuele foutmeldingen.

Heb je foutmeldingen en kom je er niet uit? Voel je vrij om in het commentaar hieronder je vragen te stellen.

Toe aan een Elementor Website?

Ben jij toe aan een nieuwe website? Waarom dan niet gelijk een Elementor website? Heb je hulp nodig bij de ontwikkeling hiervan is WordXPression een goede keuze.

Meer informatie

• Websites
• Webshops
• Online Leeromgevingen