TYPO3: Menü mit Untertitel und ID

TYPO3

Manchmal möchte man evtl. seine mit TypoScript erzeugte Navigation um einen Untertitel erweitern und um einzelne Menüpunkte unterschiedlichen zu formatieren, möchte man noch eine ID als Attibut mit aufnehmen. Dieses ist mit ein wenig TypoScript ohne weiteres möglich.

Der Untertitel

Wir bedienen uns für den Untertitel sinnvoller Weise des Feldes subtitle. Mit Hilfe eines Content Object Arrays (COA) befüllen wir nun unseren Linktext neu und fügen auch gleich den Untertitel mit ein.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
lib.menu = HMENU
lib.menu {
  entryLevel = 0
  wrap = <ul>|</ul>
  1 = TMENU
  1 {
    expAll = 1
    NO = 1
    NO {
      linkWrap = <li>|</li>
      stdWrap.cObject >
      stdWrap.cObject = COA
      stdWrap.wrap = |
      stdWrap.cObject {
        10 = TEXT
        10.field = title
        20 = TEXT
        20.wrap = <span class="teaser">|</span>
        20.field = subtitle
      }
    }
    ACT = 1
    ACT < .NO
    ACT.linkWrap = <li class="active">|</li>
  }
}

Die ID
Mit Hilfe des Parameters ATagParams erweitern wir unseren Link nun noch um das Attribut ID. Somit können wir später via CSS bestimmte Menüpunkte getrennt formatieren. Da IDs nicht mit einer Ziffer beginnen dürfen, setzen wir ein uid davor und können nun in unserem Stylesheet auf das Element zugreifen.

1
2
ATagParams = id="uid{field:uid}"
ATagParams.insertData = 1

Das komplette TypoScript

Heir nochmal das gesamte TypoScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
lib.menu = HMENU
lib.menu {
  entryLevel = 0
  wrap = <ul>|</ul>
  1 = TMENU
  1 {
    expAll = 1
    NO = 1
    NO {
      linkWrap = <li>|</li>
      ATagParams = id="uid{field:uid}"
      ATagParams.insertData = 1  
      stdWrap.cObject >
      stdWrap.cObject = COA
      stdWrap.wrap = |
      stdWrap.cObject {
        10 = TEXT
        10.field = title
        20 = TEXT
        20.wrap = <span class="teaser">|</span>
        20.field = subtitle
      }
    }
    ACT = 1
    ACT < .NO
    ACT.linkWrap = <li class="active">|</li>
  }
}

Dies ist natürlich nur ein Ansatz und lässt sich noch beliebig ausbauen. Hat euch dieser Tipp geholfen?`Habt ihr diese Technik evtl. selbst schon häufiger eingesetzt?

FacebookRSS Feeds

Die Kommentarfunktion zu diesem Beitrag wurde deaktiviert.