Joomla is gebouwd op Bootstrap. Bootstrap is in de eerste plaats een CSS structuur, maar er zitten ook allerlei javascript plug-ins bij. Zoals data-toggle. Ik had er - tot mijn schande - nog nooit van gehoord, tot ik voor een website moest zorgen voor een hamburger-menu op alle schermbreedtes...

Reden om eindelijk 's te proberen te snappen hoe het hamburger-menu nu eigenlijk precies werkt. En dat blijkt met een data-toggle te zijn. Met wat gepruts was 't me wel gelukt om die hamburger ook op groot scherm zichtbaar te krijgen, maar echt lekker werkte het (nog) niet. Op het forum vroeg iemand: waarom probeer je dan ook bestaande codering aan te passen, in plaats van gewoon zelf dat menu te coderen?
Eh... okee, hij had een punt.

Eens kijken of dat me lukt. (En zo ja, dan kijken hoe ik het in de index.php van het template kan inbouwen, zo, dat het hoofdmenu in de juiste div geplaatst wordt...). Oh, en als ik toch bezig ben: kun je een button maken van alleen een afbeelding?

De data-toggle heeft twee dingen nodig: een knop (om te toggelen, duh!) en een lijst die als dropdown tevoorschijn moet komen. Als die in verschillende divs zitten, is waarschijnlijk de "data-target" eigenschap nodig...

Het ziet er zo uit:

<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-target="#menuutje"><img src="/images/websites/menu.jpg" alt="menuknop" /></button></div>
<div id="menuutje">
<ul class="dropdown-menu">
<li class="dropdown-header">Over Joomla</li>
<li><a href="/artikelen/joomla?amp;view=article&amp;id=71&amp;catid=31">Onderhoud?</a></li>
<li><etc.>Etc</li>
</ul>
</div>

 

Verhip. Hartstikke simpel! Wat er gebeurt, is dat de toggle een class="open" aan de class="dropdown-menu" toevoegt, en de CSS zorgt voor display block of none. Er valt qua opmaak nog heel veel aan te verbeterenaan dit voorbeeldje, uiteraard, maar daar gaat dit artikel niet over. 
Een transition na de klik zou leuk zijn, maar da's nog een hele uitzoekerij, omdat transition niet werkt op de display eigenschap. Misschien iets met height 0 of auto...