TYPO3 Typoscript Menü Snippets Überblick

 

Mehrfarbiges Tab Menü

lib.tab_menu = COA
lib.tab_menu{
	10 = HMENU
	10{
		special = list
		special.value = 97,3,2
		#excludeUidList = 10
		1 = TMENU
		1{
			noBlur = 1
			wrap = <div id="tabsJ"><ul>|</ul></div>
			NO = 1
			ACT = 1
			ACTIFSUB = 1
			NO{
				wrapItemAndSub = <li class="green">|</li> || <li class="blue">|</li> || <li class="orange">|</li> 
				linkWrap = <span>|</span>
				ATagBeforeWrap = 1
			}
			ACT < .NO
			ACT{
				wrapItemAndSub = <li class="green act">|</li> || <li class="blue act">|</li> || <li class="orange act">|</li> 
			}
			ACTIFSUB < .ACT
		}
	}
}
/*============================== TAB Menü =====================================*/
#tabsJ {
	float:left;
	width:auto;
}
#tabsJ ul {
	margin:0;
	padding:0;
	list-style:none;
	width:auto;
	position:relative;
	left:12px;
}
#tabsJ li {
	display:inline;
	margin:0;
	padding:0;
}
#tabsJ a {
	float:left;
	position:relative;
	background-position:left top;
	background-repeat:no-repeat;
	margin:0;
	padding:0px 0px 0px 14px;
	text-decoration:none;
	margin-left:-12px;
	display:block;
	font-weight:normal;
	font-size:11px;
}
#tabsJ li.green a {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_braunschweig2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_braunschweig2.gif) ;
}
#tabsJ li.blue a {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_goettingen2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_goettingen2.gif) ;
}
#tabsJ li.orange a {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_oldenburg2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_li_oldenburg2.gif) ;
}

#tabsJ a span {
	float:left;
	display:block;
	background-position:right top;
	background-repeat:no-repeat;
	padding:11px 16px 20px 2px;
	color:#fff;
	cursor:pointer;
}
#tabsJ li.green a span {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_braunschweig2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_braunschweig2.gif) ;
}
#tabsJ li.blue a span {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_goettingen2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_goettingen2.gif) ;
}
#tabsJ li.orange a span {
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_oldenburg2.png) !important;
	background-image:url(../../../../uploads/tx_tllbaseext/tab_re_oldenburg2.gif) ;
}

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
    /* End IE5-Mac hack */
#tabsJ a:hover span {
	color:#FFF;
}
#tabsJ a:hover,
#tabsJ li.act a{
	background-position:0% -46px;
}
#tabsJ a:hover span,
#tabsJ li.act a span {
	background-position:100% -46px;
}
#tabsJ li.act a{
	font-weight:bold;
}
Zu den Code Snippets