Horizontales Menü, 2 oder 3 Ebenen UNTEREINANDER

  • Hans1 Hans1
    R2-D2
    0 x
    77 Beiträge
    0 Hilfreiche Beiträge
    01. 11. 2009, 16:02

    Hallo,

    ich bringe mir derzeit mit Hilfe des Buches "Praxiswissen Typo3" von Peter Meyer Typo3 4.2 um.

    Jetzt hänge ich allerdings und werde auch durch Googlen nicht fündig. Und zwar hätte ich gerne ein horizontales TMENU, bei dem die 2. und ggf. 3. Ebene (ob ich wirklich 3 brauche weiß ich noch nicht genau, sollte aber ja kein Problem sein eines aus 2 Ebenen auf 3 auszubauen) nicht verschachtelt in der 1.Ebene stehen, sondern darunter.

    Es soll also so aussehen, wenn ich auf einen Menüpunkt (z.B. News) in der 1.Ebene klicke:

    Home | News | Der Verein
    Archiv | Kommentare

    Ebene 1 und Ebene 2 sollen jeweils in ein <ol></ol> eingeschlossen sein.

    Was ich bisher durch Googlen gefunden habe war dies:

    Home | News | Archiv | Kommentar | Der Verein

    Kann mir da bitte jemand helfen, wie ich das hinbekommen kann?

    Vielen Dank und viele Grüße,

    Hansi


  • 1
  • SLAng SLAng
    Flash Gordon
    0 x
    2757 Beiträge
    0 Hilfreiche Beiträge
    01. 11. 2009, 16:21

    Entweder verwendest du 2 unterschiedliche Marker in deinem HTML-Template, oder positionierst das Untermenü jeweils so wie du es benötigst per CSS. Das du das kannst muss ich voraussetzen, da du ja keine weiteren angaben machst.

    Da du uns auch nicht sagst wo es dabei genau harkt, kann ich nur auf Beispiele und Referenzen verweisen, davon gibts nämlich allein hier im Forum ne Menge.

    Also:
    http://www.typo3.net/forum/list/list_post//65143/

    TSRef zum jeweils pasenden Object:
    http://www.typo3.net/tsref/cobject/hmenu/
    und
    http://www.typo3.net/tsref/menu_objects/

    Außerdem:
    http://www.typo3.net/typo3_dokumentation/

    Falls du dennoch Probleme haben solltest, meld dich hier wieder mit einem Codebeispiel und einer Beschreibung wo es nicht weiter geht.

  • Hans1 Hans1
    R2-D2
    0 x
    77 Beiträge
    0 Hilfreiche Beiträge
    01. 11. 2009, 18:41

    Hallo SLAng,

    vielen Dank für deine Antwort!

    [quote="SLAng"]
    Entweder verwendest du 2 unterschiedliche Marker in deinem HTML-Template,
    [/quote]
    Das hatte ich anfangs vor, bis ich in dem Buch zum Punkt Menü gekommen bin, wo ich dann gelesen habe, dass die nur einen Marker verwenden in den Beispielen und auch nirgends fand, wie ich mit dem Untermenü den 2.Marker ansprechen kann.

    [quote="SLAng"]
    oder positionierst das Untermenü jeweils so wie du es benötigst per CSS.[/quote]
    Hmm, wie das gehen soll bei meinem Problem (bei mir werden ja die <ol>s verschachtelt... Meiner Meinung geht da mit CSS nichts, dass die 1.Ebene horizontal oben und die vertikale horizontal darunter erscheint.

    [quote="SLAng"]
    Das du das kannst muss ich voraussetzen, da du ja keine weiteren angaben machst.
    [/quote]
    Ich habe so viele Beispiele per Copy&Paste probiert, dass ich mal keinen Code gepostet, sondern auf einen Link zu einer Beschreibung, wie man so ein Menü macht, wie ich es gern hätte, gehofft habe.

    [quote="SLAng"]
    Falls du dennoch Probleme haben solltest, meld dich hier wieder mit einem Codebeispiel und einer Beschreibung wo es nicht weiter geht.
    [/quote]
    Danke! Ich poste hier mal einen der Codes, die ich probiert habe inkl. Screenshot, wie es dann aussieht und wie ich es gerne hätte (das habe ich ohne Typo3 als Vorabentwurf gemacht).

    Hier, wie das Menü aussehen sollte (mit (X)HTML und CSS erstellt:
    [img]http://img406.imageshack.us/img406/8877/shouldbe.jpg[/img]

    Wie es mit dem unteren Menü aussieht

    (vor dem Klick)
    [img]http://img265.imageshack.us/img265/6165/menuvorklick.jpg[/img]

    (nach dem Klick)
    [img]http://img264.imageshack.us/img264/6334/menunachklick.jpg[/img]

    Hier mal der Quelltext des Menüs:
    [code]MENU = HMENU
    MENU {
    special = directory
    special.value = 3

    # Erste Ebene
    1 = TMENU
    1.wrap = <ol class="menu">|</ol>
    1 {
    # no state: normale Formatierung
    NO {
    wrapItemAndSub = <li>|</li>
    }
    # act state: gültig von der Menü- bis zur aktuellen Seite
    ACT = 3
    ACT {
    wrapItemAndSub = <li class="">|</li>
    }
    # cur state: gültig für die aktuelle Seite
    CUR = 3
    CUR {
    wrapItemAndSub = <li class="menu-level1-current-active">|</li>
    }
    # ifsub state: gültig für seiten die unterseiten haben
    IFSUB=1
    IFSUB {
    wrapItemAndSub = <li class="menu-level1-with-subpage">|</li>
    }
    }

    # Zweite Ebene
    2 = TMENU
    2.wrap = <ol class="submenu">|</ol>
    2 {
    NO {
    wrapItemAndSub = <li>|</li>
    }
    ACT = 3
    ACT {
    wrapItemAndSub = <li class="menu-level2-active">|</li>
    }
    CUR = 3
    CUR {
    wrapItemAndSub = <li class="menu-level2-current-active">|</li>
    }
    IFSUB = 3
    IFSUB {
    wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
    }
    }
    [/code]

    Der Marker auf meiner Seite heißt ###MENU###, darunter hatte ich anfangs ###SUBMENU### (würde ja dann über CSS untereinander dargestellt,..).

    Kann man das dann, wenn man diese beiden Marker benutzt, so einrichten, dass ###SUBMENU### nicht als Text ausgegeben wird, wenn keine 2.Ebene vorhanden ist?

    Reicht das als Angabe oder braucht ihr sonst noch Quelltext?

    Vielen Dank und viele Grüße,

    Dirk

  • SLAng SLAng
    Flash Gordon
    0 x
    2757 Beiträge
    0 Hilfreiche Beiträge
    02. 11. 2009, 09:29

    Also der Marker wird ja nur dann angezeigt, wenn du den nicht richtig ansprichst und nicht wenn einfach nur die entsprechende Ebene leer ist. Grundsätzlich sollte man sich aber schon sicher sein das man ein Untermenü benötigt. Wenn nicht braucht man ja auch nicht den Marker setzen. Für die eventuelle dritte Ebene benötigst du dann keinen weiteren Marker.

    So Sachen wie ACT = 3 gibts natürlich auch nicht. Entweder aktivieren oder nicht aktivieren. Also 1 oder 0.

    Dann ist mir noch aufgefallen das du CUR und ACT gemeinsam verwendest. Das geht natürlich, ist aber schon verwirrend, wenn man einen zustand hat für die Seite auf der man sich gerade befindet (CUR) und in dem Baum der gerade aktiv ist (ACT). Aber das ist natürlich geschmackssache.

    ALso, ein einfaches Beispiel für ein horizontales listmenü mit 2 Markern und x Unterebenen:

    [TS]MENU = HMENU
    MENU {
    entryLevel = 0
    # Erste Ebene
    1 = TMENU
    1.expAll = 0
    1.wrap = <ol class="menu">|</ol>
    1 {
    # no state: normale Formatierung
    NO {
    wrapItemAndSub = <li>|</li>
    }
    # act state: gültig von der Menü- bis zur aktuellen Seite
    ACT = 1
    ACT {
    wrapItemAndSub = <li class="">|</li>
    }
    # cur state: gültig für die aktuelle Seite
    CUR = 1
    CUR {
    wrapItemAndSub = <li class="menu-level1-current-active">|</li>
    }
    # ifsub state: gültig für seiten die unterseiten haben
    IFSUB = 1
    IFSUB {
    wrapItemAndSub = <li class="menu-level1-with-subpage">|</li>
    }
    }
    }

    # Zweite Ebene

    SUBMENU = HMENU
    SUBMENU {
    entryLevel = 1
    1 = TMENU
    1.expAll = 0
    1.wrap = <ol class="submenu">|</ol>
    1 {
    NO {
    wrapItemAndSub = <li>|</li>
    }
    ACT = 1
    ACT {
    wrapItemAndSub = <li class="menu-level2-active">|</li>
    }
    CUR = 1
    CUR {
    wrapItemAndSub = <li class="menu-level2-current-active">|</li>
    }
    IFSUB = 1
    IFSUB {
    wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
    }
    }
    2 < .1
    3 < .1
    4 < .1
    5 < .1
    }[/TS]

    Also ohne special = directory. Die einzelnen Marker starten bei dem jeweils angegebenen entryLevel. Die erste Ebene ist 0, alle weiteren werden einfach hochgezählt. Du musst also entryLevel gegebenenfalls bei dir ändern.

  • Hans1 Hans1
    R2-D2
    0 x
    77 Beiträge
    0 Hilfreiche Beiträge
    02. 11. 2009, 18:57

    Hi SLAng,

    vielen Dank! Das funktioniert ja super!

    Habe es noch um die Sortierung der Menüpunkte (mache ich per Zahlenwerte in 10er Schritten, die ich im Subtitle angebe). Gibt es da eine empfehlenswertere Lösung?

    Vielen Dank und Grüße,

    Dirk

  • 1