Dynamische Menütitel

Diese Art und Weise von Menütiteln wird angewandt, wenn man die Horizontale Navigation als Hauptnavigation benutzt und die Vertikale Navigation abhängig von der Hauptnavigation ab der 2.Ebene anzeigen möchte. So wie es auch auf den Seiten des JYAML Projektes vorzufinden ist. 

Das YAML Joomla! Template ist bereits für Dynamische bzw. wechselnde Menütitel vorbereitet. Dazu wurde die modules.php, die sich im Ordner html befindet entsprechend ausgestattet. Als Menu wird das Joomla! Standardmodul mod_mainmenu verwendet.

Funktionsweise

Der Dynamische Menütitel muss als Separator (Trenner) eingefügt werden und muss an erster Stelle des Untermenüs platziert sein. So erkennt die modules.php den Link als Titel.

Wenn jetzt ein Separator Link an erster Stelle des Untermenüs gefunden wird, dann wird dem entsprechenden Listenelement li die CSS-Klasse .menutitle hinzugefügt um es als Title Formatieren zu können.

Folgend ein Bild zur Verdeutlichung wie die Separatoren gesetzt werden müssen.

 

Die orange hervorgehobenen Menüpunkte sind vom Typ Separator/Trenner und stehen für die Titelüberschrift der vertikalen Navigation.

Konfiguration

Als erstes müssen die Menüs richtig eingestellt werden. 

Bei der Horizontalen Hauptnavigation sollte man die Startebene auf 0 stellen und die Schlussebene auf 1, damit nur die Hauptpunkte angezeigt werden.

Bei der Vertikalen Navigation muss man demnach die Startebene auf 1 stellen und die Schlussebene muss mindestens 2 oder 0 für unendlich betragen. Hier kann auch gleichzeitig die Einstellung " Titel anzeigen" ausgeschaltet werden um den normalen statischen Titel auszublenden.

Achtung:
Der Menüname in den Einstellungen der Horizontalen und Vertikalen Navigation müssen jeweils die gleichen sein (meist "mainmenu"). Die Menüpunkte unterscheiden sich ja durch die zugewiesene Startebene. Dies wird oft falsch gemacht und es werden 2 verschiedene Menüs im Menu-Manager erstellt. Dann besteht aber kein Bezug mehr zum übergeordneten Menüpunkt.

Wenn das erledigt ist muss der Titel der Vertikalen Navigation noch entsprechend mit CSS formatiert werden, dass dieser auch als solches zu erkennen ist.

Menütitel mit CSS formatieren 

Hierfür ist natürlich ebenfalls was im Template vorbereitet.

Öffnet zunächst die nav_vlist.css in css/[design]/navigation und die patch_vlist.css in css/[design]/patches.

Dort befindet sich jeweils ein kommentierter Bereich mit der Überschrift "Menu Title". Diesen Bereich einfach auskommentieren. Zur Sicherheit zeige ich folgend aber nochmal die Style Ausschnitte der zwei Dateien.

#main .menu li.menutitle {
  width: 90%;
  padding: 3px 0px 3px 10%;
  font-weight: bold;
  color: #444;
  background-color: #fff;
  border-bottom: 4px #888 solid;
}

* html #main ul.menu li.menutitle { width: 100%; w\idth: 90%; }

Das war dann auch schon alles. Dann noch viel Spaß beim dynamischen navigieren.