Seitenbaum mit 3 Ebenen

Hallo,

ich bin langsam echt am verzweifeln #angry#
Ich schaffe es nicht einen einfachen Seitenbaum in Typo3 zu generieren.

Soll dann so aussehen: Nur Text, keine Animationen oder sonst was.

Ebene 1
--Ebene 2
----Ebene 3
----Ebene 3
--Ebene 2
Ebene 1
Ebene 1

Mit 2 Ebenen ist es überhaupt kein Problem, aber die 3. Ebene sieht dann z.B. wie die 1. aus.
Die verschiedenen Ebenen lassen sich über CSS nicht einzeln ansprechen.

So sieht der Typoscript aus:

lib.field_sidebar = HMENU
lib.field_sidebar {
  wrap = <ul>|</ul>
 
  1 = TMENU
  1 {
    NO = 1
    NO {
     allWrap = <li>|</li>
    }
 
    CUR = 1
    CUR {
      allWrap = <ul class="active"><strong>|</strong></ul>
      doNotLinkIt = 1
    }
  }
 

  2 < .1
  2 {
    NO = 1
    NO {
     allWrap = <ul>|</ul>
    }
}  
}

Wo muss ich die 3. Ebene einfügen und mit welchen Merkmalen?
Was muss ich tun um alle Ebenen über CSS unterschiedlich zu stylen?

Bitte helft mit 🙂

Robert

Hallo Robert,

rlassen schrieb

Ich schaffe es nicht einen einfachen Seitenbaum in Typo3 zu generieren.

Soll dann so aussehen: Nur Text, keine Animationen oder sonst was.

Ebene 1
--Ebene 2
----Ebene 3
----Ebene 3
--Ebene 2
Ebene 1
Ebene 1

Mit 2 Ebenen ist es überhaupt kein Problem, aber die 3. Ebene sieht dann z.B. wie die 1. aus.
Die verschiedenen Ebenen lassen sich über CSS nicht einzeln ansprechen.

lib.field_sidebar = HMENU
lib.field_sidebar {
  special = directory
  # bei dieser ID fängt dein Menü an
  special.value = 1

  1 = TMENU
  1 {
    # wrap um die gesamte Ebene
    wrap = <ul class="ebene1">|</ul>
    expAll = 1

    # NO ist automatisch auf 1, brauchst du also nicht
    # NO = 1
    NO {
     wrapItemAndSub = <li>|</li>
    }

    CUR < .NO
    CUR = 1
    CUR {
      wrapItemAndSub = <li class="active"><strong>|</strong></li>
      doNotLinkIt = 1
    }
  }
 
  # hier kommt die 2. Ebene
  2 < .1
  2.wrap = <ul class="ebene2">|</ul>

  # hier kommt die 3. Ebene
  3 < .1
  3.wrap = <ul class="ebene3">|</ul>
}

Damit bekommst du so ein Menü:

<ul>
  <li>Ebene1.1
    <ul>
      <li>Ebene2.1</li>
      <li>Ebene2.2</li>
    </ul>
  </li>
  <li>Ebene1.2</li>
</ul>

Und das kannst du nun auch mit CSS anspassen, z. B. das Listenelement in der 3. Ebene:

ul.ebene1 li ul.ebene2 li ul.ebene3 li { }

Grüße Patrick

Vielen Dank für deine Hilfe!
Jetzt klappts 🙂