Joomla: active-Klasse für Menüüberschrift / Trennzeichen (JQuery-Schnipsel)
Für Touchscreens sollte man Menüpunkte nicht verlinken, die ein Dropdown mit Untermenüs öffnen. Beim Tippen öffnet sich sonst der getippte Link statt des Dropdownmenüs, wenn man keine unhandlichen Maßnahmen getroffen hat. In Joomla verwendet man dafür unverlinkte Menüeintragstypen Menüüberschrift oder Trennzeichen. Leider bekommen die aber keine active-CSS-Klasse, wenn Untermenüpunkte aktiv/geöffnet sind.
Das Nachrüsten per Modul-Override und PHP ist nicht ganz trivial, gerade, wenn es mehr Menü-Ebenen als nur zwei gibt. Deshalb möchte ich hier eine alternative JQuery-JavaScript-Lösung vorstellen.
Vorher
Im Bild unten sieht man ein Beispiel einer aktuell geöffneten Unterseite "Sonstige". Der zugehörige Menüeintrag in zweiter Ebene ist per CSS orange gekennzeichnet über den CSS-Selektor .active. Diese CSS-Klasse setzt Joomla automatisch; auch für fast alle Elternmenüpunkte ("parents"), wenn es welche gibt.
In erster Ebene über "Sonstige" sieht man den Menüpunkt "Schnipsel", der vom Typ Menüüberschrift ist. Und der fällt bei Joomla leider durch. Der übergeordnete Menüeintrag in erster Ebene ist nicht als aktiv markiert, weil Joomla für Menüs vom Typ Menüüberschrift keine entsprechende CSS-Klasse setzt. Ist das Dropdown geschlossen, sieht man nicht, dass man sich gerade in diesem Menüzweig befindet. Will ich aber...
Hier auch noch mal als HTML-Code.
<li class="item-594 deeper parent">
<span class="nav-header ">Schnipsel</span>
<ul class="nav-child unstyled small">
...
<li class="item-593 current active">
<a href="/programmierer-schnipsel/sonstige">
Sonstige
</a>
</li>Das LI von "Schnipsel" in Zeile 1 hat die Klassen deeper und parent aber kein active.
Der Titel "Schnipsel", Zeile 2, ist umrahmt von einer Klasse nav-header. Die setzt Joomla automatisch bei Menüüberschriften. Hätten wir stattdessen ein Trennzeichen verwendet, stünde da divider; allerdings im LI der Zeile 1. Hauptsache verwirrlich ;-)
Nachher
Das JavaScript fügt der Problem-Menüüberschrift eine active-Klasse hinzu, weil eines der Untermenüs ("children") auch eine hat. Damit können wir die Überschrift per CSS mit einem orangen Rahmen ausstatten; wie im nächsten Bild zu sehen.
Und so sieht der HTML-Code dann aus. Das LI in erster Ebene hat jetzt auch die gewünschte Klasse active.
<li class="item-594 deeper parent active">
<span class="nav-header ">Schnipsel</span>
<ul class="nav-child unstyled small">
...
<li class="item-593 current active">
<a href="/programmierer-schnipsel/sonstige">
Sonstige
</a>
</li>Das JQuery-Script
jQuery(document).ready(function($)
{
var $menueheader = $("span.nav-header").parent("li.parent.deeper");
var $dividerSelectors = $("li.divider.deeper");
$.merge($dividerSelectors, $menueheader).each(function()
{
if ($(this).find("li.active, li.alias-parent-active").length)
{
$(this).addClass("active");
}
});
}
In Zeile 3 suchen wir alle SPAN mit Klasse nav-header, die LI mit Klassen parent und deeper als Eltern haben (= Menüüberschrifttypen mit Kindern). Diese Eltern werden gesammelt.
In Zeile 4 sammeln wir alle LI, die Klassen divider und deeper haben (= Trennzeichentypen mit Kindern).
Zeile 6 fasst die beiden Sammlungen zusammen und durchläuft die Funde einzeln.
Zeile 8 prüft, ob sich darunter ein active findet. Wenn ja, bekommt auch der Fund eine solche in Zeile 9.
Ich bevorzuge es, den Code per Datei zu laden oder per Joomla-Methoden zum Einbinden von Codes im HEAD des Templates.
Sie können ihn aber auch in der Template-index.php vor den schließenden </head>-Tag einsetzen. Innerhalb des <body>-Bereiches ginge auch, also als so genanntes Inline-Script, gilt jedoch heutzutage als "schlechte Praxis". Vergessen Sie in beiden Fällen den umschließenden Script-Tag nicht: <script>HIER DER CODE</script>
Und wie immer gilt, "geht wahrscheinlich alles viel eleganter". Nur zu! Her damit!