Das Joomla mod_mainmenu

"mainmenu" ist das Standard Menü-Modul von Joomla. Für dieses Menü gibt es eine eigene Style-Sheet-Datei, die für die besondere Optik des Menüs sorgt. Dazu gehört:

  1. Das Kennzeichnen ob Menüeinträgen (parent) Untermenüpunkte haben oder nicht
  2. Das Kennzeichnen des gerade aktiven Menüpunktes (current) - Menüpunkt der gerade aktuell sichtbaren Seite
  3. Das Kennzeichnen aufgeklappter Menüeinträge (acitve)
  4. Das hirarchische Einrücken untergeordeneter Menüeinträge (level)
  5. Die evtl. genutzte besondere Kennzeichnung des ersten (first_item) und letzten Menüeintrages innerhalb einer Ebene (last_item)
  6. Und schließlich noch die Möglichkeit einer ID-abhängigen individuelle Formatierung von Menüeinträgen (itemID)

Mit der Summe dieser Ausweisungen erhält der Designer umfassende Formatierungsmöglichkeiten für das Gestalten, das Design und die Funktion seiner Menüs.

 

Die Struktur eines mod_mainmenu

Das Modul MainMenü ist grundsätzlich wir folgt strukturiert:

<ul class="menu">
<li class="first_item item1">
<a href="/A"><span>A</span></a>
</li>
<li class="parent active item27">
<a href="/B" class="active_link"><span>B</span></a>
<ul>
<li class="first_item parent active item34">
<a href="/B.1" class="active_link"><span>B.1</span></a>
<ul>
<li class="first_item item75">
<a href="/B1.1"><span>B1.1</span></a>
</li>
<li id="current" class="first_item active item74">
<a href="/B1.2" class="active_link current_link"><span>B1.2</span></a>
</li>
<li class="last_item item75">
<a href="/B1.3"><span>B1.3</span></a>
</li>
</ul>
</li>
<li class="last_item item59">
<a href="/B.2"><span>B.2</span></a>
</li>
</ul>
</li>
<li class="item60">
<a href="/C"><span>C</span></a>
</li>
<li class="last_item item73">
<a href="/D"><span>D</span></a>
</li>
</ul>

Wichtig ist hier zu erkennen, wann current, acitive, current_link, active_link sowie last_item und first_item gesetzt werden und wie der richtige Aufbau der Listen erfolgt.



Zu den Regeln im Detail:

  • Hat ein Menüeintrag Childs, dann erhält die LI-Klasse immer (nicht nur wenn gerade active) den zusätzlichen Eintrag „parent". Damit kann dann im Item-Style kenntlich gemacht werden, dass es Untereinträge gibt, z.B. durch ein Plus-Zeichen vor dem Parent-Eintrag oder durch „..." oder ein Weiter-Dreieck nach dem Parent-Menüeintrag.
  • Das gerade ausgewählte Listenelement/Menüeintrag erhält immer "current" und current_link immer genau das eingeschlosse a-Tag. Das ist also die Seite die gerade aufgerufen wurde.
  • Der Erste Menüeintrag einer Tiefenebene erhält jeweils den Classen-Eintrag "first_item", der letzte dieser Ebenen jeweils „last_item". Damit wird eine abweichende Formatierung des ersten und letzten Menüeintrages möglich z.B. durch beginnende oder abschließende Designelemente. Ist ein Untermenüpunkt der einzige auf dieser Ebene, dann ist er weder "first_item" noch "last_item". Beim designen könnte sich das evtl. auch als Nachteil erweisen und es wäre besser einem einzelnen dann sowohl first_item als auch last_item zu vergeben. Darüber habe ich noch nicht abschließend nachgedacht, weil dieser Fall in meinem Design so nicht herausgestellt werden sollte.
  • Die Menüeinträge, die als Elterneintrag aufgeklappt sind, also deren Child-Elemente angezeigt werden sind aktive Menüeinträge (active). Diese erhalten
    1. im jeweiligen LI den Classen-Style „active",
    2. Gleichzeitig bekommt das A-Tag die Classe "active_link"
    3. Auch das gerade aktuelle A-Tag bekommt, obwohl nicht zwingend aufgeklappt neben dem "current_link" die Style-Class „active_link".
    Damit sind also acitve Element immer nur oberhalb des current-links sinnvoll und richtig.
  • Jeder Menüeintrag erhält im LI-Tag einen ID-Eintrag "itemID" - für die ID-Nummer diesen Menüpunkt. Für den Designer bietet das die Möglichkeit Menüeinträge speziell zu gestalten, z.B. jedem Menüeintrag eine eigene Farbe zuzuweisen oder ein individuelles Icon voranzustellen.