Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv
 

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.



Kommentare (0)

Bisher wurden hier noch keine Kommentare veröffentlicht

Einen Kommentar verfassen

Kommentar als Gast veröffentlichen. Registriere Dich oder melde Dich zu Deinem Benutzerkonto an.
0 Zeichen
Anhänge (0 / 3)
Deinen Standort teilen
Gib den Text aus dem Bild ein. Nicht zu erkennen?