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
[youtube]https://www.youtube.com/watch?v=hSHjaE2dneg[/youtube]



Teil 2
[youtube]https://www.youtube.com/watch?v=WIs07SIzriw[/youtube]
Alle TYPO3-Tutorials kostenlos downloaden

Dieser Beitrag hat 48 Kommentare

  1. Christian Hager

    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.

    1. Wolfgang Wagner

      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

  2. scholzi

    … Super, darauf habe ich schon gewartet, weil ich nixs passensdes gefunden habe!
    Danke @wolfgang!!!
    scholzi 😉

    1. Wolfgang Wagner

      Keine Ursache. Viel Spaß bei der Umsetzung! 🙂

  3. Albert Stockhausen

    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

  4. gebi84

    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

    1. Wolfgang Wagner

      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.

        1. Wolfgang Wagner

          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.

          1. gebi84

            Hi Wolfgang,
            sorry war grad ein paar Tage weg, darum konnte ich es erst jetzt testen. Aber es funktioniert wunderbar. Danke. 🙂
            lg
            gebi84

  5. Tobi

    Hi,
    wie schauts mit einem netten Video für ein horizontales Menu aus? Sowas wäre sicherlich auch interessant.
    MfG Tobi

      1. Tobi

        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

        1. Wolfgang Wagner

          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.

  6. Tobi

    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

    1. Wolfgang Wagner

      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.

      1. Tobi

        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

          1. Tobi

            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

  7. Wolfgang Wagner

    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

    1. Tobi

      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?

  8. Amine

    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 ? !

  9. Amine

    Stimmt das sagten Sie, sorry

  10. chris

    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.

  11. chris

    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. Wolfgang Wagner

      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?

  12. chris

    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 !

  13. Michael

    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

    1. Wolfgang Wagner

      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.

  14. Michael

    Ahh, alles klar! Danke.

    1. Wolfgang Wagner

      Klar. Du musst nur dein HTML-Template entsprechend vorbereiten und mappen.

  15. Niels Heinrich

    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

    1. Wolfgang Wagner

      Hast du in der Config die baseURL und den absRefPrefix korrekt eingegeben? Evtl. ein Tippfehler drin?

      1. Niels Heinrich

        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?

        1. Niels Heinrich

          Funktioniert alles bis auf die Seitemap, dort sehe ich einen komplett schwarzen Bildschirm.

          1. Wolfgang Wagner

            Verwendest du da eine Extension?
            Und taucht der schwarze Bildschirm in allen Browsern auf?

  16. Malte dB

    Vielen Dank für die wundervolle Tutorialreihe,
    ohne dich wäre ich an Typo3 verzweifelt!
    LG

    1. Wolfgang Wagner

      Keine Ursache! Wünsche dir weiter viel Spaß!
      P.S.: man schreibt TYPO3 immer groß, ist wie bei BMW oder VW 😉

  17. leo

    Danke für dieses Tutorial…
    viel Mühe… aber…
    wieder einmal mehr wird einem klar, was TYPO3 ist..
    ein unsägliches Monster…
    schwer zu konfigurieren, mit kryptischen Konfigurationsdateien….
    einfach grausam.. warum tut ihr eich das alle an… ??

    1. Wolfgang Wagner

      Weil kein anderes CMS auch nur annähernd die Flexibilität von TYPO3 bietet. Aber bitte hier keine Diskussionen darum, welches CMS das beste ist, die gibt es schon anderswo zur Genüge 😉

  18. Markus

    Hi Wolfgang,
    erst mal super gelungen deine Reihe! 🙂
    ich habe das Menü mal weiter entwickelt und mit IFSUB gearbeitet. Dabei soll ein Pfeil erscheinen wenn das Menü Unterpunkte hat. Soweit funzt das bis auf….
    in der nächsten Ebene erscheint der Pfeil dann nicht mehr… 🙁
    UND irgendwie bekomme ich das IFSUBRO nicht zum Laufen. Hiermit wollte ich verhindern, dass der Pfeil verschwindet. Ich verzweifel grad… hier mal der kurze Auszug von dem was ich meine… Kannst du mir einen Tip geben?
    20 = HMENU
    20 {
    entryLevel = 2
    1 = TMENU
    1 {
    wrap = |
    NO.wrapItemAndSub = |
    CUR = 1
    CUR.wrapItemAndSub = |
    CUR.linkWrap = |
    CUR.doNotLinkIt = 1
    }
    2 < .1
    2.wrap = |
    3 < .2
    4 < .2
    5 < .2
    }
    Thx schon mal im Voraus.

  19. Markus

    Hat sich erledigt!
    Hat alles wie gedacht funktioniert, aber ich habe noch nen Background in das CSS eingebaut, was die IFSUB-Funktion einfach überlagert hat.
    Danke!

  20. Thorsten

    Hallo Wolfgang,
    eigentlich ist es nicht so meine Art etwas in Blogs zu posten, aber ich wollte hier auch mal etwas loswerden. 😉
    Mir ist aufgefallen, dass Dich jeder lobt und anschließend gleich eine Frage hinterherschiebt. Ich denke es ist mal an der Zeit, es etwas anders zu machen.
    Loben, ohne gleich etwas zu wollen. :-))
    Ich habe mir früher unzählige Bücher zu TYPO3 gekauft und irgendwie konnte mich kein Buch näher an TYPO3 heranbringen, bis ich auf Deinen Blog und Deine Videos gestoßen bin.
    Ich finde Deine Arbeit und die Mühe die Du in die Videos gesteckt hast, wirklich genial.
    Vielen Dank dafür!

Kommentare sind geschlossen.