TYPO3 – Menü mit unterschiedlichen Farben und Klassen (optionSplit)

Problem:

Man möchte ein Menü mit unterschiedlichen Klassen erstellen und dabei soll das Menü auch zukünftig ohne weiteres eingreifen im Typoscript bestehenen bleiben. Das bedeutet, kein manuelles hinzufügen von Menüpunkten mit den richtigen Klassen.

Lösung:

Die Funktion „optionSplit“ ist eine einfache und mächtige Methode um einzelnen Bereichen unterschiedliche Klassen zuzuweisen. Dies lässt sich auf viele Typoscriptbereiche adaptieren.

Um optionSplit zu benutzen, muss man nur den Split-Befehle zwischen die zutrennenden Bereiche schreiben.

Wir gehen bei unseren Beispielen von einem sechsseitigem TMENU aus.
Die CSS-Klassen stehen für die entsprechenden Farben, die wir im CSS definiert haben.


Beispiel:

wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>|*|<li class="blue">|</li>
 

Dieses Ergebnis erhält man durch die Verwendung der obigen Typoscriptzeile:

OptionSplit geht beim Trennen immer von drei zu trennenden Teilen aus:

Dem ersten, dem mittleren und dem letzten Teil.
Oberste Priorität hat immer der letzte Teil, der mittlere hat die niedrigste Priorität und wird bei Bedarf auch übersprungen.

Es gibt 3 verschiedene optionSplit Anweisungen:

|*|

Die einzelnen Teile werden durch ein |*| voneinander getrennt.

||

Mit || werden innerhalb eines Teils verschiedene Styles getrennt um beispielsweise eine immer wiederkehrende Farbkombination innerhalb des mittleren Teils zu erreichen.

|*||*|

Durch ein |*||*| wird der entsprechende Teil übersprungen, beziehungweise er wird als nicht existent definiert. In diesem Fall wird der nächste Teil solange wiederholt wie es nötig ist.

Generell gelten 4 Grundlegende Regeln für optionSplit:

  • Oberste Priorität hat der letzte Teil, danach der erste und die niedrigste Priorität hat der mittlere Teil.
  • Wenn der mittlere Wert fehlt, wird der letzte Befehl des ersten Teils solange wiederholt, wie es nötig ist.
  • Wenn sowohl der erste als auch der mittlere Teil fehlt, wird der erste Befehl des letzten Teils solange wiederholt, wie es nötig ist.
  • Wenn der letzte Teil fehlt, wird der mittlere Teil solange wiederholt, wie es nötig ist.

(Quelle: http://wiki.typo3.org/wiki/De:TSref/optionSplit , übersetzt aus dem Englischen)

Zu guter letzt die Kombinationsmöglichkeiten mit optionSplit und eine dazugehörige bildliche Darstellung.

Dieser Typoscriptcode erstellt ein einfaches TMENU:

lib.navi= HMENU
lib.navi{
	1 = TMENU
1.wrap =<ul>|</ul>

	1{
		NO = 1
		NO{
			wrapItemAndSub = #[Hier kommt der OptionSplit-Befehl rein]
		}
	}
}

In diesen Beispielen muss man nur jeweils die wrapItemAndSub Zeile austauschen.

	wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>||<li class="blue">|</li>

r || g || b

	wrapItemAndSub =<li class="red">|</li>|*|<li class="green">|</li>||<li class="blue">|</li>

r |*| g || b

wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>|*|<li class="blue">|</li>

r || g |*| b

wrapItemAndSub =<li class="red">|</li>|*|<li class="green">|</li>|*|<li class="blue">|</li>

r |*| g |*| b

wrapItemAndSub =<li class="red">|</li>|*||*|<li class="green">|</li>||<li class="blue">|</li>

r |*||*| g || b

wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>||<li class="yellow">|</li>||<li class="blue">|</li>

r || g || y || b

wrapItemAndSub =<li class="red">|</li>|*|<li class="green">|</li>||<li class="yellow">|</li>||<li class="blue">|</li>

r |*| g || y || b

wrapItemAndSub =<li class="red">|</li>|*|<li class="green">|</li>|*|<li class="yellow">|</li>||<li class="blue">|</li>

r |*| g |*| y || b

wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>|*|<li class="yellow">|</li>|*|<li class="blue">|</li>

r || g |*| y |*| b

wrapItemAndSub =<li class="red">|</li>||<li class="green">|</li>|*||*|<li class="yellow">|</li>||<li class="blue">|</li>

r || g |*||*| y || b

  • Diesen Beitrag weiterempfehlen:

11 Gedanken zu „TYPO3 – Menü mit unterschiedlichen Farben und Klassen (optionSplit)

  1. Pingback: Anonymous

  2. Pingback: TYPO3 – Spezielle Menüs (directory) | Das Brainworxx Weblog

  3. Pingback: TYPO3 – Menü Beispiele | Das Brainworxx Weblog

  4. Pingback: TYPO3 – Tutorial, wie erstelle ich ein Menü des Typs GMENU? | Das Brainworxx Weblog

  5. Felix

    Ich habe auch noch einen hilfreichen Schnippsel.
    Ziel ist es 4 Menüpunkte zum Beispiel eine Sitemap mit verschiedenen Eigenschaften immer wieder zu wiederholen.

    Diese Anweisung fängt immer wieder nach dem 4 Menüpunkt von vorne an.

    allWrap= |*|<h2 class="col1">|</h2>||<h2 class="col2">|</h2>||<h2 class="col3">|</h2>||<h2 class="col4">|</h2>         
    
    Antworten
  6. Pingback: Super TYPO3 Optionsplit Tutorial gefunden!

  7. Pingback: TYPO3 | Pearltrees

  8. aero1247e

    Vielen Dank für diese sehr übersichtliche Erklärung.

    Ich kämpfe gerade mit einem Problem und finde keine Lösung dazu. Ich muss das vorhergehende und das folgende Menü-Item jeweils mit einem sep. Wrap versehen. Soll in etwas so aussehen (angenommen Item 4 ist aktiv):

    – Item 1 | class=“first“
    – Item 2
    – Item 3 | class=“previous“
    – Item 4 | class=“active“
    – Item 5 | class=“next“
    – Item 6
    – Item 7

    Lässt sich dies mit optionSplit darstellen?

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Lösen Sie bitte die Rechenaufgabe. *