TYPO3: Geteilte Navigation
20. November 2006 | 12 KommentareFür eine Webseite sollte folgende TYPO3-Seite mit geteilter Navigation erstellt werden:
Wenn man in der oberen Navigation [Ebene 1] auf ÜBER UNS klickt, sollen in der linken Navigation
– die übergeordnete Seite ÜBER UNS sowie
– deren Unterseiten Unterseiten » Philosophie, » Team, » Unser Büro [Ebene 2]
ausgeben werden.
Beispiele dafür findet man auf: kook-label.de oder hyder-consulting.de (hier auch noch mit dritter Ebene)
Obere Navigation erstellen
Für die obere Navigation erstellen wir mit dem TypoScript [in: Template root-Seite » SETUP] ein TMENU, für das wir nur die erste Ebene definieren.
OBERES_MENU = HMENU
OBERES_MENU {
special = directory
#ID der Seite, unter der die 1. Ebene liegt ist ‚3‘
special.value = 3
1 = TMENU
1.NO = 1
}
Linke Navigation erstellen
Ebene 1-Name ausgeben
In der linken Navigation müssen wir zuerst die aktuelle Seite der ersten Navigation ausgeben. Dies lösen wir über einen Klickpfad (Breadcrumb) mit dem TMENU und dem special = rootline
[erzeugt den Klickpfad] bei dem wir uns einfach nur die das erste Element [Ebene 1] ausgeben lassen.
Mit special.range = 2|2
geben wir an, dass nur unsere Ebene 1 ausgeben wird. range = 1
ist die Root-Seite, unter der unsere Ebene 1 liegt, range = 2
ist unsere Ebene 1]. Range funktioniert so range = Anfangsebene Klickpfad | Endebene Klickpfad
.
10 = HMENU
10 {
special = rootline
special.range = 2|2
1 = GMENU
1.NO = 1
}
Unterpunkte Ebene 2 ausgeben
Anschließend lassen wir uns die Unterpunkte der Ebene 2 ausgeben. Dies lösen wir über eine ganz normales TMENU, bei dem die Ebene 1 ‚weggelassen‘ oder ausgeblendet wird.
Das Ausblenden der Ebene 1 erfolgt über das entryLevel = 2
. Dabei ist zu beachten, dass die Punkte special
und special.value
, anders als bei einem normalen HMENU, gelöscht werden müssen.
20 {
# special = directory
# special.value = 3
entryLevel = 2
1=TMENU
1.NO = 1
2.NO<.1.NO
}
Autor: www.undkonsorten.com / Thomas Alboth
18. Oktober 2007, 19:14 Uhr
Im TypoScript unter „Unterpunkte Ebene 2 ausgeben“ kann etwas nicht stimmen – 2 öffnende aber nur 1 schließende Klammer.
3. November 2007, 06:42 Uhr
Sehr gute Anleitung – funktioniert einwandfrei! 🙂
@ Jakob: wie wär’s damit, einfach ne schließende Klammer einzufügen am Ende? Dann klappt’s auch mit den Nachbarn 😛
12. Mai 2009, 10:56 Uhr
Danke, die Anleitung klappt super!
Nur versuche ich jetzt, die dritte Ebene auch getrennt darzustellen, aber das klappt nicht… Habt ihr dazu vielleicht irgendwo eine Anleitung?
12. Mai 2009, 13:11 Uhr
@zina: Na kommt, Du schaffst das – ist doch jetzt wirklich kein Act mehr. Selbes Spiel nur eine Ebene tiefer. /lg /thomas
12. Mai 2009, 14:00 Uhr
Danke für die schnelle Antwort! Ich dachte ja auch, dass das jetzt einfach sein sollte, aber das 3. Feld bleibt leer! Das habe ich im Setup, ist da vielleicht noch ein Fehler drin?
lib.level1 = HMENU
lib.level1 {
special = directory
special.value = 172
excludeUidList = 174, 175
1 = TMENU
1.NO = 1
}
lib.level2 = HMENU
lib.level2 {
entryLevel = 2
1=TMENU
1.NO {
1.NO = 1
2.NO<.1.NO
}
lib.level3 = HMENU
lib.level3 {
entryLevel = 3
1=TMENU
1.NO {
1.NO = 1
3.NO<.2.NO
}
12. Mai 2009, 14:03 Uhr
UPS, peinlich… Da hatte ja bereits einer was zu einer fehlenden Klammer geschrieben!!!
Aber: jetzt geht alles!!! DANKE für das super Tutorial!!!!!!
12. Mai 2009, 14:20 Uhr
das stimmt, da war wirklich eine Klammer zu viel…jetzt sollte es aber passen. Schön, wenn Dir unser Tutorial geholfen hat. Jochen // undkonsorten
14. Mai 2009, 16:55 Uhr
Könntet ihr mir noch einmal helfen, bitte?
Ich habe die drei Ebenen nebeneinander und möchte jetzt, dass die aktuelle Seite als aktiv gekennzeichnet wird, allerdings auf allen drei Ebenen. Also so, dass z.B. im ersten Level der Link als aktiv gekennzeichnet ist, zu dem das Untermenü in Level2 ausklappt, ebenso in Level2.
CUR und ACT zeigt ja nur die aktive Seite an, ich bräuchte eher etwas in Richtung Klickpfad, aber ich habe keine Idee, wie man das hier einfügen könnte.
Kann man das überhaupt in dieser Art von Menü umsetzen?
14. Februar 2010, 23:30 Uhr
Hallo! Das ist zwar genau das, was ich suche, aber um ehrlich zu sein, weiß ich nicht genau, wie ich das ins Template setzen muß. Setze ich für die obere Navigation:“OBERES_MENU“ als Marker? Und was bzw. wie ist das dann linken Navigation im Template zu setzen? Außerdem würde ich auch gerne die weiterverzweigenden Menüs im linken Menü nach klick anzeigen lassen.
Danke für jede Hilfe!!
15. Februar 2010, 00:14 Uhr
Wenn Du mit Markern arbeitest – JA. Einen Marker ###OBERES-MENUE### einen ###LINKES-MENUE### oder wie auch immer Du das nennen willst.
Das 2.NO< .1.NO erstelt Dir ja schon eine zweite Ebene in linken Menü. Wie man Menüs bastels steht in der TSREF.
Viel Glück / tom
15. Dezember 2011, 14:21 Uhr
hallo
können sie mir bezüglich folgende code helfen?
ich versuche eine geteilte navigation aufzubauen und zwar es soll mit der linke vertikal navigation mit 2 Ebene anfangen
wenn man schon auf der seite der 2te ebene soll eine horizontale navigation mit 3 menü-punkte angezeigt werdrndann angezeigt werden.
folgende code habe ich bis jetzt erstellt, es klapt mit der vertikal navi, aber leider nicht mit der horizontale
lib.mainnav = HMENU
lib.mainnav {
wrap = |
special = directory
special.value = 285
#entryLevel = 1
1 = GMENU
1.NO = 1
1.NO {
XY = 178, 24
backColor = #364497
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.fontColor = #FFFFFF
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 12
10.niceText = 1
10.offset = 14, 16
# Eine weisse Linie erzeugen
20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 178,1
backColor = #FFFFFF
}
20.offset = 0, 23
}
# Einen RollOver-Zustand beschreiben
1.RO < .1.NO
1.RO{
# Hintergrundfarbe überschreiben
backColor = #061467
# Symbol einfügen
30 = BOX
30.color = #ffffff
30.dimensions = 6,10,5,5
}
#Activ Zustand beschreiben
1.ACT < .1.RO
# Die zweite Ebene als Kopie der ersten Ebene beschreiben
2 < .1
2.NO {
backColor = #D3E2F9
10.fontColor = #061467
10.fontSize = 11
}
2.RO < .2.NO
2.RO.backColor = #C1D5F4
}
danke
Germain
4. August 2014, 07:38 Uhr
Danke, für den Artikel. In den bekannten Typo3 Foren konnte niemand helfen, dabei ist die Lösung recht einfach.
Beste Grüße
Jormungand