Zum Inhalt springen

verschachtelte Listen mit TypoScript

Erstellt am 30. November 2009 · 5 Antworten · letzte Antwort am 9. Dezember 2009

Tags: Frage

cmoke ·

HAllo!

Da ich selber seit einigen Tagen erfolglos an meinem neuesten Problem gearbeitet habe, würde ich gerne die Frage in die Runde werfen.
Stichwort ist: verschachtelte Listen erstellen mit TypoScript.

Das Menü habe ich vorher mit HTML/CSS problemlos funktionsfähig gemacht. Es sind drei MEnüebenen und es soll eine rollover-Aufklapp-Variante werden. Die manuelle HTML-Verschachtelung sieht wie folgt aus:

<ul>
<!-- ###MENUESUBMARKER### go -->
    
<!-- PUNKT1 -->
<li> </li>
<!-- PUNKT2 -->
<li> 
  <ul>
  <!-- PUNKT2 Sub1-->
  <li> </li>
  <!-- PUNKT2 Sub2-->
  <li> </li>
  <!-- PUNKT2 Sub3-->
  <li> </li>
  <!-- PUNKT2 Sub4-->
  <li> </li>
  </ul>
</li>
    
<!-- PUNKT3 -->
<li> 
  <ul>
  <!-- PUNKT3 Sub1-->
  <li> 
      <ul>
      <!-- PUNKT3 Sub1 Sub1-->
      <li> </li>
      <!-- PUNKT3 Sub1 Sub2-->
      <li> </li>
      <!-- PUNKT3 Sub1 Sub3-->
      <li> </li>
      <!-- PUNKT3 Sub1 Sub4-->
      <li> </li>
      </ul>
  </li>

  <!-- PUNKT3 Sub2-->
  <li> </li>
  <!-- PUNKT3 Sub3-->
  <li> </li>
  <!-- PUNKT3 Sub4-->
  <li> </li>
  </ul>
  </li>

<!-- PUNKT4 -->
<li>     
  <ul>
  <!-- PUNKT4 Sub1-->
  <li> </li>
  <!-- PUNKT4 Sub2-->
  <li> </li>
  <!-- PUNKT4 Sub3-->
  <li> </li>
  <!-- PUNKT4 Sub4-->
  <li> </li>
  </ul>

</li>
<!-- ###MENUESUBMARKER### stop -->
    
</ul>

Wenn ich jetzt den gleichen Aufbau mit TypoScript erreichen will muss ich theoretisch folgende Syntax eingeben:

  subparts.MENUESUBMARKER = HMENU
  subparts.MENUESUBMARKER {
    ### ################################## erste Menüebene ################################## ###
    
    1 = TMENU
    1 {
      expAll = 1
      #öffnet das Listenelement für alle Einträge der ersten Ebene
      NO.wrapItemAndSub = <li> |     
    }    
    ### ################################## zweite Menüebene ################################## ###
    2 = TMENU
    2 {
      #umschließt die 2. Ebene mit einer Liste und schließt danach das Listenelement der 1. Ebene
      expAll = 1
      wrap = <ul> | </ul></li>
      #öffnet Listenelement für alle Einträge der 2. Ebene
      NO.allWrap = <li> |
    } 

    ### ################################## dritte Menüebene ################################## ###     
    3 = TMENU
    3 {
      #umschließt die 3. Ebene mit einer Liste, schließt das Listenelement der Einträge von Ebene 2
      wrap = <ul class="untersub"> | </ul></li>
      expAll = 1
      #umschließt alle Einträge dieser Ebene mit einem Listenelement
      NO.allWrap = <li>|</li>   
    }   
}

...oder??
Zumindest erscheint mir das logisch. Allerdings, wenn ich mir den Quellcode anschaue, entwickelt sich dort eine unschlüssige Eigendynamik. <li>s werden mal geschlossen, mal nicht. Zum Beispiel wird das <li> für den ersten MEnüeintrag nicht geschlossen, für den zweiten aber (nach Einfügen des Untermenüs) schon, so wie es sein sollte.
Und solche unerklärliche Phänomene verunsichern dann einen newbee...
Weiß jemand Rat zur Lösung dieses Ansatzes?!

#angry#

Julian.​Hofmann ·

Hallo.

Verschachtelte Listen (X)HTML-konform zu erzeugen ist bei Menüs nicht wirklich als Einstiegsaufgabe geeignet. Menüs bringen hierzu soviele Eigenschaften und v.a. unterschiedliche Wraps mit, dass mans ich leicht vertut.

Eine gute Übersicht, in welcher Reihenfolge udn Schachtelung die Wraps funktionieren, bieten undkonsorten in ihrem Blog: Wrap-Dschungel

In Kürze zusammengefasst sind die zwei Schritte zum Listenmenü:
1. Listen werden via wrap im Menüobjekt gesetzt
2. Listenpunkte werden via wrapItemAndSub im Menüeintragsobjekt gesetzt

temp.menu = HMENU
temp.menu {
    1 = TMENU
    1 {
      wrap = <ul>|</ul>
      NO.wrapItemAndSub = <li>|</li>
    }
    2 < .1
}

Viele Grüße
Julian

cmoke ·

Vielen Dank Julian.

Die Seite ist wirklich interessant.
Habe mittlerweile mein Menü mit TMENU_LAYERS erstellt, da ich das Einblenden der Untermenüs mit TMENU nicht hinbekommen habe; allerdings ohne das gesamte Konstrukt zu verstehen. Vielleicht habe ich einfach nur den Fehler gemacht, in HTML-Codes zu denken. Und vielleicht ist das ja bei TypoScript ein Fehler...

Kommt Zeit, kommt Rat.

Nachtrag: ... oder auch kein Rat... Was mich gerade überrascht, ist die Tatsache, dass das Menü (welches mit jedem Browser funktioniert) gerade bei OPERA Probleme macht. Ich dachte, Opera und Firefox wären diejenigen, um die man sich am wenigsten kümmern muss. Problem: die erste Ausklapp-Ebene liegt über der Hauptebene. Gibt´s ne Lösung?

uwe k ·

Hi hatte das gleiche Problem und nun ein Ergebnis

menulinks = Marker im typo template
--------------------------------------------
typo Code:
page.10.marks.menulinks = HMENU
page.10.marks.menulinks.special = directory
page.10.marks.menulinks.special.value = ID EINTRAGEN
page.10.marks.menulinks.entryLevel =1
page.10.marks.menulinks.1= TMENU
page.10.marks.menulinks.1.expAll = 1

page.10.marks.menulinks.1.NO.wrapItemAndSub = <ul class="slidedoormenu"><li> | </li></ul>
page.10.marks.menulinks.1.NO = 1

page.10.marks.menulinks.2 = TMENU
page.10.marks.menulinks.2.NO.wrapItemAndSub = <ul class="doormenu">|</ul>
page.10.marks.menulinks.2.NO.linkWrap =<li> | </li>
---------------------------------------------------------
css: -gekürzt-
.slidedoormenu li ul {
list-style-type: none;
display: none;
}

.slidedoormenu li:hover ul {
display: block;
}
.slidedoormenu .doormenu li a {
/*Formatierungen*/
}
---------------------------------------
Anpassungen für IE:
typo Code:

config.doctype = xhtml_trans

u.

cmoke ·

Hi Uwe K
Ich nehme an, das ist ein Beitrag zu meinem Problem mit den TMENUs, die nicht aufklappen?!
Jedenfalls danke!

uwe k ·

Hi
Ja, das ist ein Beitrag zu den nicht klappenden Klappmenüs

In Deinem Typoscript müssen
also Zeile 9 16 18 geändert werden

Das Problem liegt nicht im Html-Code-denken
sondern im Verständnis der wraps

Bitte
u.