TYPO3 Typoscript Menü Snippets Überblick

 

Vertikales Listenmenü 3 Ebenen

### Typoscript Code ##########
lib.hmenu_2 = HMENU
lib.hmenu_2 {
entryLevel = 0
#excludeUidList = 119,138
stdWrap.wrap = <div id='hmenu'><div id='menutop'><img src='uploads/tx_tllbaseext/menutop_01.gif'></div>|<div id='menubottom'><img src='uploads/tx_tllbaseext/menubottom_01.gif'></div></div>
stdWrap.required = 1
1 = TMENU
1{
wrap = <ul id='menuListV'>|</ul>
noBlur =1
ACT = 1
ACTIFSUB = 1
NO{
wrapItemAndSub = <li>|</li>
ATagParams = class='menuLinkV'
}
ACT{
wrapItemAndSub = <li>|</li>
ATagParams = class='menuLinkActV' 
}
ACTIFSUB{
wrapItemAndSub = <li>|</li>
ATagParams = class='menuLinkAct2V' 
}
}
2 = TMENU
2{
noBlur = 1
ACT = 1
ACTIFSUB = 1
wrap = <ul>|</ul>
NO{
wrapItemAndSub = <li>|</li>
ATagParams = class='submenuLinkV'
}
ACT{
wrapItemAndSub =<li>|</li>
ATagParams = class='submenuLinkActV'
}
ACTIFSUB{
wrapItemAndSub = <li>|</li>
ATagParams = class='submenuLinkActV'
}
}
3 = TMENU
3{
noBlur = 1
ACT = 1
ACTIFSUB = 1
wrap = <ul>|</ul>
NO{
wrapItemAndSub = <li>|</li>
ATagParams = class='subsubmenuLinkV'
}
ACT{
wrapItemAndSub = <li>|</li>
ATagParams = class='subsubmenuLinkActV'
}
ACTIFSUB{
wrapItemAndSub = <li>|</li>
ATagParams = class='subsubmenuLinkActV'
}
}
}
################################################
/*-------------CSS---------------------*/
ul#menuListV{
width:164px;
background-color:#a7d319;
}
ul#menuListV, ul#menuListV ul{
list-style-type:none;
margin:0;
padding:0;
}
/*Normal Zustand 1 Ebene */
a.menuLinkV:link, a.menuLinkV:visited, a.menuLinkV:hover, a.menuLinkV:active{
	display:block;
	position:relative;
	/*height:17px;*/
	margin:0px;
	padding:2px;
	font-size:1em;
	font-weight: normal;
	padding-left:20px;
	text-decoration:none;
	background-color:#a7d319;
	background-image:url(../../../../uploads/tx_tllbaseext/menupfeil_17.gif);
	background-repeat:no-repeat;
	background-position:center left;
	color:#fff;
        border-bottom: 1px solid #fff;
        font-weight:bold;
	
}
 
a.menuLinkV:hover {
	background-color:#a7d319;
	background-image:url(../../../../uploads/tx_tllbaseext/menupfeil_hover.gif);
	background-repeat:no-repeat;
	background-position:center left;
	/*text-decoration: underline;*/
        color:#023b76;
}
/* Aktiver Zustand 1. Ebene - wenn keine Unterpunkte vorhanden */
a.menuLinkActV:link, a.menuLinkActV:visited, a.menuLinkActV:hover, a.menuLinkActV:active{
	display:block;
	position:relative;
	/*height:17px;*/
	margin:0px;
	padding:2px;
	padding-left:20px;
	font-size:1em;
	font-weight: normal;
	text-decoration:none;
	background-color:#a7d319;
	background-image:url(../../../../uploads/tx_tllbaseext/menupfeil_hover.gif);
	background-repeat:no-repeat;
	background-position:center left;
	color:#023b76;
	font-weight:bold;
	border-bottom: 1px solid #fff;
}
/* Aktiver Zustand 1. Ebene - wenn Unterpunkte vorhanden */
a.menuLinkAct2V:link,a.menuLinkAct2V:visited,a.menuLinkAct2V:hover,a.menuLinkAct2V:active{
	display:block;
	position:relative;
	/*height:17px;*/
	margin:0px;
	padding:2px;
	padding-left:20px;
	font-size:1em;
	font-weight: normal;
	text-decoration:none;
	background-color:#a7d319;
	background-image:url(../../../../uploads/tx_tllbaseext/menupfeil_hover.gif);
	background-repeat:no-repeat;
	background-position:center left;
	color:#023b76;
	font-weight:bold;
	border-bottom: 0px solid #fff;
}
/*Normal Zustand 2. Ebene */
a.submenuLinkV:link, a.submenuLinkV:visited,a.submenuLinkV:hover,a.submenuLinkV:active{
        font-family: Verdana;
       
	display:block;
	position:relative;
	height:15px;
	margin:0px;
	padding:1px;
	padding-left:30px;
	font-size:0.8em;
	font-weight: normal;
	text-decoration:none;
	background-image:url(../../../../uploads/tx_tllbaseext/subnavi_no.gif);
	background-repeat:no-repeat;
	background-position:center left;
	color:#fff;
}
 
a.submenuLinkV:hover {
	color:#023b76;
	background-image:url(../../../../uploads/tx_tllbaseext/subnavi_act.gif);
}
/* Aktiver Zustand 2. Ebene  */
a.submenuLinkActV:link, a.submenuLinkActV:visited,a.submenuLinkActV:hover,a.submenuLinkActV:active{
 font-family: Verdana;
	display:block;
	position:relative;
	/*background-color:#FFD5B1;*/
	color:#023b76;
	height:15px;
	margin:0px;
	padding:1px;
	padding-left:30px;
	font-size:0.8em;
	font-weight: normal;
	text-decoration:none;
	background-image:url(../../../../uploads/tx_tllbaseext/subnavi_act.gif);
	background-repeat:no-repeat;
	background-position:center left;
}
/*Normal Zustand 3. Ebene */
a.subsubmenuLinkV:link, a.subsubmenuLinkV:visited,a.subsubmenuLinkV:hover,a.subsubmenuLinkV:active{
        font-family: Verdana;
       
	display:block;
	position:relative;
	/*height:16px;*/
	margin:0px;
	padding:1px;
	margin-left:10px;
	padding-left:30px;
	font-size:0.8em;
	font-weight: normal;
	text-decoration:none;
	background-image:url(../../../../uploads/tx_tllbaseext/schalter_subnavi2.gif);
	background-repeat:no-repeat;
	background-position:top left;
	color:#fff;
}
 
a.subsubmenuLinkV:hover {
	text-decoration: underline;
}
/* Aktiver Zustand 3. Ebene  */
a.subsubmenuLinkActV:link, a.subsubmenuLinkActV:visited,a.subsubmenuLinkActV:hover,a.subsubmenuLinkActV:active{
 font-family: Verdana;
	display:block;
	position:relative;
	/*background-color:#FFD5B1;*/
	color:#023b76;
	/*height:15px;*/
	margin:0px;
	padding:1px;
	margin-left:10px;
	padding-left:30px;
	font-size:0.8em;
	font-weight: normal;
	text-decoration:none;
	background-image:url(../../../../uploads/tx_tllbaseext/schalter_subnavi2.gif);
	background-repeat:no-repeat;
	background-position:top left;
}
Zu den Code Snippets