TYPO3 Typoscript Menü Snippets Überblick

### Typoscript Code ##########
lib.layermenu2 = HMENU
lib.layermenu2 {
	1 = TMENU
	1 {
		expAll = 1
		wrap = <div class="cssmenuWrap"><ul id="nav2">|</ul></div>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li class="menuparent">|</li>

		ACT = 1
		ACT.wrapItemAndSub = <li class="li_act">|</li>
		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
IFSUB.ATagParams = class="ifsubarrow"
		ACTIFSUB = 1
		ACTIFSUB.wrapItemAndSub = <li class="li_act menuparent">|</li>
ACTIFSUB.ATagParams = class="ifsubarrow"
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}

/*-------------CSS---------------------*/
ul#nav2, ul#nav2 ul {
	color:black;
	font-size:100%;
	margin:0pt;
	padding:0pt;
	width:203px;
}
ul#nav2 li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	position:relative;
}
ul#nav2 li a {
	border-bottom:1px solid #FFFFFF;
	color:#777777;
	display:block;
	padding:4px 4px 4px 8px;
	text-decoration:none;
}
ul#nav2 li.li_act a {
	color:#FFFFFF;
}
* html ul#nav2 li {
	float:left;
	height:1%;
}
* html ul#nav2 li a {
	height:1%;
}
ul#nav2 ul {
	background:#d4d4d4 none repeat scroll 0%;
	display:none;
	left:202px;
	position:absolute;
	top:0pt;
}
ul#nav2 ul li a {
	color:#FFFFFF;
}
ul#nav2 ul li a:hover {
	color:#c71315;
}
ul#nav2 li ul li a {
	padding:4px 4px 4px 8px;
}
ul#nav2 li:hover ul ul, 
ul#nav2 li:hover ul ul ul, 
ul#nav2 li.over ul ul, 
ul#nav2 li.over ul ul ul {
	display:none;
}
ul#nav2 li:hover ul, 
ul#nav2 li li:hover ul, 
ul#nav2 li li li:hover ul, 
ul#nav2 li.over ul, 
ul#nav2 li li.over ul, 
ul#nav2 li li li.over ul {
	display:block;
}
ul#nav2 a.ifsubarrow {
	background:transparent url(../../../../uploads/tx_tllbaseext/klickpfad_pfeil_igmson_01.gif) no-repeat scroll right center;
}
ul#nav2 li.menuparent:hover, 
ul#nav2 li.over {
	background-color:#d4d4d4 ;
}
ul#nav2 li.li_act {
	background-color:#d4d4d4 ;
}
ul#nav2 li a:hover {
	color:#FFFFFF;
}

/*--------------------Javascript Code -----------------------------*/
/*Javascript Code für IE 6 und älter*/

function IEHoverPseudo() {

 var navItems = document.getElementById("nav2").getElementsByTagName("li");

 for (var i=0; i<navItems.length; i++) {
 	if(navItems[i].className == "menuparent") {
 		navItems[i].onmouseover=function() { this.className += " over"; }
 		navItems[i].onmouseout=function() { this.className = "menuparent"; }
 	}
 }

}
window.attachEvent("onload", IEHoverPseudo);

Integration der Javascript-Datei:

Wie das geht wird im Forum beschrieben.