23.08.2018 | TYPO3, TYPO3 Schnipsel
Typo3 – Untergeordnete Menüeinträge highlighten

Wir wollen innerhalb einer Navigation via Typoscript CSS Klassen für aktive Menüenträge verwenden. Wenn die Navigation jedoch zwei- oder mehrstufig wird, sollten für die bessere Übersicht aber nicht nur die aktiven, sondern auch die übergeordneten Menüeinträge gehighlighted werden. Das erreicht man via Typoscript innerhalb der Navigation folgendermaßen.

menu = COA
menu {
	10 = HMENU
		entryLevel = 0
	10 {
		1 = TMENU
		1 {
			wrap = |

				NO = 1
				NO.ATagParams = title="{field:title}" class="item-{field:uid}" id="item-{field:uid}"	
				NO.ATagParams.insertData = 1						
				NO.linkWrap = <li>|</li>
				NO.wrapItemAndSub = |
				
				CUR = 1
				CUR < .NO
				CUR.ATagParams = id="navigation-mainitem-active" class="item-{field:uid}"
				CUR.ATagParams.insertData = 1
				
				ACT < .CUR
			
		}
		
		2 = TMENU 
		2 {
				NO = 1
				NO.ATagParams = title="{field:title}" class="item-{field:uid}" id="item-{field:uid}"	
				NO.ATagParams.insertData = 1						
				NO.linkWrap = <li class="navigation-subitem">|</li>
				NO.wrapItemAndSub = |
				
				CUR = 1
				CUR < .NO
				CUR.ATagParams = class="navigation-subitem" id="navigation-subitem-active" class="item-{field:uid}"
				CUR.ATagParams.insertData = 1
				
				ACT < .CUR
		}
	  }
	
	
	
} // menu

Jetzt muss nur eine ensprechende CSS Klasse für navigation-subitem-active und  navigation-mainitem-active vorhanden sein.

Bspw. etwas in dieser Art.

#navigation-mainitem-active,
#navigation-subitem-active {
	color: #b1003e;
	text-decoration: underline;
}