2. August 2010
TYPO3-Tutorial Teil 58: Subnavigation für Unterseiten
Diesmal geht es ein wenig in die Tiefe 
Wir legen zwei weitere Navigationsebenen an, indem wir einer Seite mehrere Unterseiten zuweisen. Um in diesen Seiten eine Navigation der Unterseiten anzuzeigen, legen wir eine zweite HTML-Vorlage an, die mit TemplaVoila gemappt wird.
Als Basis der Subnavigation dient dabei die „Vertikale Listennavigation“ des CSS/HTML-Frameworks YAML.
Viel Spaß!
Teil 1
Teil 2
Artikel wurde gefunden mit den Suchbegriffen:
- typo3 tmenu tutorial
- typo3 subnavigation
- typo3 submenu
- typo3 navigation highlight wenn unterseite aktiv
- typo3 horizontales menü
- typoscript horizontales menü
- typo3 unterseiten
- typo3 subnavi
- horizontales menü typo3 anleitung
- typo unterseiten unterseite
Hallo, wieder einmal toll geworden.
Falls es jemand interessiert wie man an Stelle dem Wort „Produkte“ etwas anderes angeben kann, ich habe es so umgesetzt:
lib.subMenu = COA
lib.subMenu {
10 = HTML
10.value.lang.de = <span>Produkte</span>Untertitel
# 10.value.lang.en = <span>xxx</span>xxx (somit auch mehrere Sprachen möglich)
10.value.wrap = <h1>|</h1>
10.value.typolink.parameter = 2029
20 < lib.subTemp
20.entryLevel = 5
}
Ich könnte somit „Produkte“ nicht nur einen anderen Namen geben, sondern auch gleich eine Art Untertitel einführen.
Hi,
das ist auch eine schöne Variante. Aber da geht ein wenig die Flexibilität verloren. Bei der Variante aus dem Tutorial ist es egal, auf welcher Seite sie eingesetzt wird, es wird immer der Name der übergeordneten Seite aus Ebene 2 ausgegeben.
Gruß
Wolfgang
Pingback: TYPO3-Tutorial Teil 58: Subnavigation für Unterseiten | WoWa's … | Surfemotion-Blog
… Super, darauf habe ich schon gewartet, weil ich nixs passensdes gefunden habe!
Danke @wolfgang!!!
scholzi
Keine Ursache. Viel Spaß bei der Umsetzung!
Hallo Wolfgang,
das sind wirklich tolle Tutorials. Sie haben mir beim Einarbeiten in Typo3 sehr geholfen. Bei dem aktuellen Teil 58 würde ich gerne noch relaisieren, dass der Hauptmenüpunkt „Produkte“ aktiv bleibt, wenn eins der Untermenüs angeklickt worden ist. Hast Du eine Idee, wie das gehen könnte?
Danke, Albert
Das ist gar nicht so schwer.
Du musst im Typoscript der Hauptnavigation zusätzlich den Zustand ACT aktivieren und definieren. Du kannst z.B. eine neue CSS-Klasse vergeben und dann in deinem Stylesheet definieren.
Siehe in der TSRef: http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.2.1/view/1/10/#id4556974
Hallo Wolfgang
das mit dem ACT geht soweit gut, damit der erste Untermenüpunkt gleich aktiv geschalten wird, habe ich den Hauptmenüpunkt als Shortcut eingefügt. Nun aber habe ich das Problem, dass Home auch immer mit auf aktiv geschalten wird, da sich Home ja immer zu oberst in der Rootline befindet. Wie kann ich das umgehen? Konnte leider nichts in der tsref finden.
Danke.
lg
gebi84
Zeig doch mal dein Typoscript für die Navigation. am besten nutzt du dafür pastebin.com , wähle dort als SyntaxHighlight Typoscript aus, ist dann übersichtlicher.
hi hier der code: http://pastebin.com/aK8ZxPR3
danke.
Nimm mal das ACT aus Level 1 raus und packe es in Level 2, siehe http://pastebin.com/e7D65KPi
Vielleicht bringt dich das weiter.
Der Menüpunkt sollte aber verlinkt sein, damit du jederzeit wieder auf die oberste Ebene kommst. Du kannst natürlich eine andere CSS-Klasse vergeben und die entsprechend stylen.
Hi Wolfgang,
sorry war grad ein paar Tage weg, darum konnte ich es erst jetzt testen. Aber es funktioniert wunderbar. Danke.
lg
gebi84
Hi,
wie schauts mit einem netten Video für ein horizontales Menu aus? Sowas wäre sicherlich auch interessant.
MfG Tobi
Was genau meinst du damit?
Wie das horizontale Hauptmenü der Demoseite erzeugt wird, habe ich ja hier erklärt: http://wowa-webdesign.de/typo3/typo3-tutorial-teil-26-typoscript-fuer-die-navigation/
Hallo,
sorry, da hab ich mich wohl ein wenig unverständlich ausgedrückt. Dein komplettes Tutorial hat ja ein horizontales Menü.
Ich meinte eher, dass die Untermenüs auch ins horizontale Menü eingegliedert werden.
MfG Tobi
nun, es wird ja im Prinzip nur eine Liste erzeugt. Wie die wo eingebunden wird, liegt im Prinzip an dir. Du kannst die Liste ja auch horizontal ausgeben, indem du z.B. die Listenelemente floatest oder auf display:inline setzt.
Hallo,
ich bin jetzt so vorgegangen wie im Video beschreiben. Meine rechte Spalte wird gefüllt mit meinem Seiteninhalt.
Die linke Spalte bleibt aber gänzlich leer.
Im Quelltext finde ich nur
vor.
Woran kann dies liegen?
MfG Tobi
Das kann natürlich an tausend Sachen liegen. Offentsichtlich hast du irgendwo einen Fehler gemacht, vielleicht nur einen kleinen Tippfehler beim Mappen oder im Typoscript. Überprüfe alles sorgfältig.
Hallo,
ich habe meinen Fehler gefunden und zwar hast du ja bei der Vertikale Listennavigation Umsetzung per Typoscript für TYPO3 „lib.submenu“ und genau da lag der Hund begraben. Bei mir muss es lib.field_submenu heissen.
Gibt es auch die Möglichkeit, dass alle Untermenüs gleich zu Beginn angezeigt werden? Denn aktuell muss man ja zuerst auf den jeweiligen Menüpunkt klicken, bevor die weiteren Untermenüs auftauchen.
MfG Tobi
Du meinst als Dropdown-Menü?
Ich meinte, wenn ich das ganze so realisiere wie in deinem Video, dann taucht ja in der linken Spalte die Subnavigation auf.
Nehmen wir mal an mein Hauptnavigationspunkt lautet Turniere. In der Subnavi hab ich dann Turnier 1, Turnier 2, Turnier 3. In Turnier 1 hab ich noch 2 weitere Untermenüs, Turnier 1.1 und Turnier 1.2.
Das ganze schaut ja dann so aus:
Turniere
----------------
Turnier 1
Turnier 2
Turnier 3
Die weiteren Untermenüs Turnier 1.1 und Turnier 1.2 werden ja erst angezeigt, wenn ich auf Turnier 1 klicke.
Ich wollte nun wissen, ob man die weiteren Untermenüs gleich mit anzeigen lassen kann.
Also so:
Turniere
----------------
Turnier 1
- Turnier 1.1
- Turnier 1.2
Turnier 2
Turnier 3
MfG Tobi
Dafür gibt es denn Parameter expAll, denn du in den jeweiligen Menüleveln aktivieren musst, also z.B.
1.expAll=1
oder
2.expAll=1
Dass muss ich dann ja nur in meinem submenu eingeben oder?
lib.field_submenu = COA
lib.field_submenu {
10 = TEXT
10.wrap= |
10.data = leveltitle:2 // Anpassen an die Ebene der übergeordneten Seite
20 = HMENU
20 {
entryLevel = 2 // Muss angepasst werden, je nach dem, auf welcher Ebene die übergeordneten Seiten liegen
1 = TMENU
1 {
wrap = |
NO.wrapItemAndSub = |
CUR = 1
CUR.wrapItemAndSub = |
CUR.linkWrap = |
CUR.doNotLinkIt = 1
1.expAll=1
}
2 < .1
2.wrap = |
2.expAll=1
3 < .2
4 < .2
5 < .2
}
}
hab ich da einen denkfehler drinne?
Probier’s mal so: http://pastebin.com/ANzjiXGz
Hi, wo wurde die Html struktur für die Vertikale-Navigation in diesem Beispiel eingefügt ? hab genau aufgepasst, die wurde nämlich nirgendwo eingefügt ? !
Das Menü wird per Typoscript erzeugt.
Stimmt das sagten Sie, sorry
Kein Problem
Hallo Wolfgang,
finde meinen Fehler nicht! Es geht um die Subnavigation habe das Script hier abgelegt http://pastebin.com/BqPrtkmz
Vieleicht liegt mein Fehler beim Mappen, wie kriege ich dies heraus? Auf der linken Seite ist zwar der Platz für das Submenü, aber es wird nichts angezeigt.
Mein Mapping kannst du hier etwas erkennen?
ROOT ROOT Wählen Sie das HTML-Element der Seite, das Sie als übergeordnetes Container-Element der Vorlage möchten. bodyINNER (ALLE)
Skiplinks field_skiplinks ulINNER (ALLE)
Navigation field_navigation divINNER (ALLE)
Inhalt field_inhalt divINNER (ALLE)
Jahr field_jahr spanINNER (ALLE)
Top Navigation field_topnav spanINNER (ALLE)
Submenü field_submenu divINNER (ALLE)
1. dein Typoscript spricht lib.submenu an. Hast du das Feld in Templavoila auch genauso benannt? Oder heisst das vielleicht lib.field_submenu?
2. Hast du das Element als Typoscript-Objektpfad gemappt?
3. Hast du im Typoscript leveltitle und entryLevel an die richtige Ebene angepasst?
zu 1) Danke hier habe ich mir nochmal die Schreibweise angeschaut hatte schon mal dies bedacht habe beide Schreibarten ausbrobiert mir ist dann augefallen das ich anstand Punkt Unterstrich hatte Puhh muß man verdamt aufpassen.
Ich arbeite mit zwei Partitionen und kann so auch auf beiden Betriebsystemen auf Typo3 zugreifen.
Danke dir das wars !
Hallo Wolfgang,
wie kommt es eigentlich, dass im c75r plöztlich nochmals subcolums (c50l und so) auftauchen, obwohl du das im Video gar nicht eingegeben hast.
Ein TS-Wunder oder hast du mal zwischendrin die Aufzeichnung abgeschalten und es „im Stillen“ eingefügt?
Michael
Du meinst im 1. Video? Das liegt daran, dass die Seite „Produkte“ ja schon ein 50/50-Template als Inhaltselement hatte, bevor ich das Template umschaltete.
Ahh, alles klar! Danke.
Hallo Wolfgang,
Wäre es möglich die Subnavigation für Unterseiten auch in der Linken Spalte aufzunehmen?
Link : http://brr-design.ch/index.php?id=6
Gruess Roman
Klar. Du musst nur dein HTML-Template entsprechend vorbereiten und mappen.
Hi Wolfgang, tolles Tutorial.
CoolUri zerstört jedoch das css bei den Produkte-Unterseiten. Ohne CoolUri funktioniert es gut.
Vielleicht hast Du einen Tip für mich?
Läuft auf MAMP localhost MAC.
Danke
Hast du in der Config die baseURL und den absRefPrefix korrekt eingegeben? Evtl. ein Tippfehler drin?
Vielen Dank, war genau mein Problem.
Bei einem ersten Test funktionierte einmal:
baseURL = http://localhost:8888/typo3/
absRefPrefix = http://localhost:8888/typo3/
dann jedoch nicht mehr, also habe ich es wie in deinem Video einfach ausgeklammert und es funktionierte alles bis zum Video 58 als ich die Unterseiten nicht mehr richtig sehen konnte.
Jetzt funktioniert es mit:
baseURL = http://localhost:8888/
absRefPrefix = http://localhost:8888/
Vielen Dank für die schnelle Hilfe und sehr gute Videos.
P.S. Suche eine übersichtliche Navigation für sehr viele Unterebenen. Glaube das beste wäre ein sich immer weiter expandierendes Vertikalmenü. Gibt es da nicht auch gute fertige Extensionen?
Funktioniert alles bis auf die Seitemap, dort sehe ich einen komplett schwarzen Bildschirm.
Verwendest du da eine Extension?
Und taucht der schwarze Bildschirm in allen Browsern auf?
Vielen Dank für die wundervolle Tutorialreihe,
ohne dich wäre ich an Typo3 verzweifelt!
LG
Keine Ursache! Wünsche dir weiter viel Spaß!
P.S.: man schreibt TYPO3 immer groß, ist wie bei BMW oder VW