Thema: [J!1.5] Horizontales Hauptmenü mit vertikalen Untermenüs erstellen

Zitat von null815

Ich werde mal eine Schritt-für-Schritt-Anleitung machen, sobald ich Zeit finde. Ich werde das Gefühl nicht los, dass ich das sonst noch häufiger erklären muss.

Wie recht ich doch hatte. Bevor ich noch mehr Anfragen erhalte, versuch ich mich mal an einer hoffentlich nachvollziehbaren Anleitung die (fast) keine Fragen offen lässt.

Ausgangslage
Zum ausgewählten Menüpunkt eines (Haupt-)Menüs sollen passende (Unter-)Menüs angezeigt werden. Diese Technik wird auch Splitmenü genannt.

Im folgenden Beispiel gehe ich davon aus, dass das Hauptmenü oben horizontal und die Untermenüs links vertikal angezeigt werden sollen. Ist natürlich Geschmacksache und hängt ganz vom Template ab, worauf ich hier nicht näher eingehen möchte. Abwandlungen davon sind mit wenig Transferleistungen und etwas CSS bestimmt möglich und dürfen gerne ergänzt werden.

Struktur des einzigen (!) zu erstellenden Menüs im Backend:

• Hauptpunkt 1
  • Unterpunkt 1.1
  • Unterpunkt 1.2
• Hauptpunkt 2
  • Unterpunkt 2.1
  • Unterpunkt 2.2
• Hauptpunkt 3
  • Unterpunkt 3.1
  • Unterpunkt 3.2

Menü erstellen
Menüs --> Menüs --> <Neu>
Eindeutiger Name:Beispielmenü
Titel: Beispielmenü
Beschreibung: beispielhafte Beschreibung
Modul Titel: Beispielmenü
<Speichern>

Mit Vergabe eines Modultitels erstellt Joomla automatisch ein Modul mit diesem Namen.
Das kann nachträglich auch selbst erstellt werden. (Module --> Neu --> Menü ...)

Menüeinträge erstellen
Menüs --> Beispielmenü --> <Neu>
Auf was auch immer verlinkt wird... Wichtig ist, beim Anlegen der Unterpunkten darauf zu achten, dass bei "Anzeigen in" das richtige Menü und bei "Übergeordneter Eintrag" der entsprechende Hauptpunkt ausgewählt ist.

Modul erstellen
Das Modul "Beispielmenü" hat Joomla bereits erstellt, wenn Modultitel angegeben wurde. Allerdings nicht aktiviert und ggf. nicht in gewünschter Position.

Erweiterungen --> Module --> Beispielmenü
- gewünschte Position auswählen
- Aktiviert: <ja>
Modulparameter rechts:
- Menüstil: Liste (mit den anderen funktioniert es nicht!)
- Startebene bzw. Erste Ebene: 0
- Schlussebene bzw. Letzte Ebene: 1
Dies bewirkt, dass nur die erste Ebene im Hauptmenü angezeigt wird.

Mein Lieblings-Beispiel-Template ist "Beez". Deswegen wähle ich als Position "user3" und deaktivere dort schon vorhandenes "obere Menü" aus den Beispieldaten.
Eigene Position erstellen und nötige CSS-Angaben zu horizontaler Navigation geht mir hier jetzt zu weit. Dazu ggf. Suche bemühen und gerne ergänzen.

Module für die Untermenüs erstellen
Erweiterungen --> Module --> <Neu> --> <Menü> --> <Weiter>
- Titel angeben: Untermenü 1
- gewünschte Position auswählen, bspw: left
- Menüzuweisung: <Wählen Sie einen Menüeintrag von der Liste>
Passende Menüpunkte aus Liste auswählen, also für "Untermenü 1" wären das Hauptpunkt 1, Unterpunkte 1.1 & 1.2. So wird Untermenü1 nur angezeigt, wenn Hauptpunkt1 aktiv ist.
Ergänzt: Hier muss nach späterem Hinzufügen von Menüpunkten in den Untermenüs entsprechend die Menüzuweisung ergänzt werden, weil es leider keine Auswahl á la "Alle Unterpunkte von" gibt.

Modulparameter rechts:
- Menüname: Hier das Menü-Modul der Hauptpunkte auswählen um Bezug herzustellen, also "Beispielmenü"
- Menüstil: Liste (mit den anderen funktioniert es nicht!)
- Startebene bzw. Erste Ebene : 1
- Schlussebene bzw. Letzte Ebene: 0
Dies bewirkt das der Hauptpunkt nicht in Untermenü angezeigt wird.

Für jedes Untermenü muss ein entsprechendes Modul erstellt werden. Module können übrigens kopiert & dann angepasst werden.

Fertig! Zumindest was die Menüerstellung angeht.

Wieso der Aufwand?
Entscheidender Unterschied zu "normalen", einzelnen Menüs ist die vorhandende Beziehung der Untermenüs zu den Hauptmenüs. Zu sehen ist das besonders gut in der Breadcrumb-Navigation und an der nun mehrfach vorkommenden CSS-Klasse "active", welche Kennzeichnung zueinander gehörender Menüs per CSS ermöglicht.
Werden Untermenüs nur mit Hilfe der Auswahl bei Menüzuweisungen beim aktiven Hauptpunkt angezeigt, fehlt bei der Breadcrumbs-Navigation der zugehörige Hauptpunkt.

Ich persönlich finde es auch übersichtlicher alle Menüpunkte in einem Menü zu haben. Zwar sind dazu mehr Module nötig, aber die müssen wohl seltener angepasst werden.

Aktive Menüpunkte per CSS hervorheben
Die genauen CSS-Selektoren sind vom Template abhängig. In der Theorie sieht das Ganze wie folgt aus: Joomla gibt dem <li> der aktiven Haupt- und Unterpunkten eine Klasse "active", den Hauptpunkten auch noch eine Klasse "parent". Der Menüpunkt der angezeigten Seite erhält noch eine ID #current.
Im Template "Beez" kann das dann so aussehen:

Code:

/* Link des aktiven Hauptpunktes erröten lassen */ 
#header ul.menu .active a {
background-color:#F00;
}
/* Link der angezeigten Seite erröten lassen */ 
#left li#current a {
background-color:#F00;
}

So, jetzt seit ihr dran.
Freue mich über Ergänzungen, Verbesserungen und natürlich Danksagungen.

Ergänzung zum Verlinken der Hauptpunkte:
Soll Hauptpunkt auf gleiche Seite wie Unterpunkt verlinken, sollte der Menütyp "Alias" bzw. "Menü Link" sein und bei Parametern "Menüeintrag" der Unterpunkt ausgewählt werden. Sonst wird zwar Inhalt des Unterpunktes angezeigt, aber nur Hauptpunkt erhält die Klasse active.

Zitat von rebelrebel

Ich möchte mehrere Menüs die sich bis zu viermal spalten also hier ein Beispiel:
Tiere
...... > Säugetiere
......................> Raubtiere
....................................> Löwen

Reicht Dir dazu nicht ein normales Menü mit entsprechenden Unterpunkten? Also ohne die räumliche Trennung, die bei der Anleitung hier der springende Punkt ist.

Trotzdem könnte aber Hauptpunkt "Tiere" getrennt bspw. horizontal sein und dann passende Untermenüs vertikal bis Ebene 3 gehen. Kenne den Rest der Struktur nicht, aber ich würde vermeiden zu tief zu gehen oder wenn es insgesamt nicht allzuviele Punkte sind vielleicht mal den Punkt im Menü-Modul "Alle Unterpunkte anzeigen" ausprobieren.

Vielleicht kommt ja noch der heiße Tipp?

Vielleicht ist Dir der Punkt "Übergeordneter Eintrag" beim Erstellen der Menüeinträge unbekannt?
Oder ich verstehe Dein Problem nicht, wieso ein normales Menü nicht ausreicht. Doch, doch, Struktur und Problematik vieler Menüpunkte habe ich verstanden.

Zitat von SpArKy

Ich hätte gern, dass der aktive Hauptmenüpunkt über dem Untermenü links angezeigt wird.

Wie wäre es dem Modul der Untermenüs einen Titel zu geben und anzeigen zu lassen?

Zitat von SpArKy

aber der wäre ja dann nicht identisch mit dem menüpunkt in der horizontalen navigation, oder?!

Höchstens der Text.

Eine horizontale Navigation mit "wandernden" aktiven Menüpunkten?
Wenn Hauptmenüpunkt wirklich klickbar (also nicht nur als Überschrift) über den Untermenüs stehen soll, dann frag ich mich schon wieso überhaupt eine horizontale Navigation?