Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

JoomlaSchnipsel

In Touchscreen-Zeiten 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 JavaScript-Maßnahmen getroffen hat. In Joomla verwendet man dafür unverlinkte Menütypen Menüüberschrift oder Trennzeichen. Leider bekommen die aber keine active-CSS-Klasse, wenn Untermenüpunkte 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 haben wir uns für eine JQuery-JavaScript-Lösung entschieden.

Vorher

Im Bild sieht man ein Beispiel einer geöffneten Unterseite Sonstige, Der zugehörige Menüeintrag in zweiter Ebene ist per CSS orange gekennzeichnet über die CSS-Klasse .active, die Joomla automatisch setzt.

Der übergeordnete Menüeintrag in erster Ebene namens Schnipsel ist nicht als aktiv markiert, weil Joomla für Menüs vom Typ Menüüberschrift keine entsprechende CSS-Klasse setzt.

Gruen: Die aktive Seite hat active-Klasse und -Farbe. Rot: Menüüberchrift hat keine active-Klasse.
Gruen: Die aktive Seite hat active-Klasse und -Farbe. Rot: Menüüberchrift hat keine active-Klasse.
<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>

Nachher

Das JavaScript fügt der Menüüberschrift eine active-Klasse hinzu, weil ein Untermenü auch eine hat. Damit können wir die Überschrift per CSS mit einem orangen Rahmen ausstatten.

Nach Einsatz des JavaScripts hat auch die Menüüberschrift einen orangen Rahmen
Nach Einsatz des JavaScripts hat auch die Menüüberschrift einen orangen Rahmen
<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

Ich bevorzuge es, den Code per Datei zu laden oder per Joomla-Methoden zum Einbinden von Codes. Sie können ihn aber auch in der Template-index.php vor den schlie0enden </head>-Tag einsetzen. Aber auch innerhalb des <body>-Bereiches. Vergessen Sie in diesen beiden Fällen den umschließenden Script-Tag nicht. <script>HIER DER CODE</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");
  }
 });
}

 

JavaScript Joomla Frontend Schnipsel