TYPO3 Typoscript Menü Snippets Überblick

page.includeJS.ie6hover = fileadmin/templates/js/ie6_li_hover.js

lib.mainmenulbs= COA
lib.mainmenulbs.2 = HMENU
lib.mainmenulbs.2{
 entryLevel = 0
 1 = TMENU
 1{
  expAll=1
  wrap = <div id="navigationlbs"><ul id="navlbs">|</ul></div><br style="clear:both;" />
  NO = 1
  NO {
   
   doNotLinkIt = 1
   wrapItemAndSub = <li class="level1">|</li>
   stdWrap.cObject = COA
   stdWrap.cObject{
   	10 = TEXT
   	10{
   		field = title
   		typolink{
   			parameter.field = uid
   			ATagParams.cObject = COA
   			ATagParams.cObject{
   				10 = IMG_RESOURCE
   				10{
   					file = GIFBUILDER
   					file{
   						XY = [15.w]+15,68
   						transparentBackground = 1
   						reduceColors = 64
   						
   						10 = IMAGE
        					10{
							file = uploads/tx_tllbaseext/no.gif
          						offset = 0,0
          						tile = 60          
        					}
        					#10 >
        					15 = TEXT
         					15 {
            						text.field = title
            						fontSize = 12
            						offset = 6,20
            						fontColor = #ffffff
            						#antiAlias = 1
        					}
        					18 = IMAGE
        					18{
							file = uploads/tx_tllbaseext/act_mid.gif
          						offset = 2,34
          						tile = 60
          					}
        					20 = IMAGE
        					20{
          						file = uploads/tx_tllbaseext/act_left.gif
          						offset = 0,34
        					}
        					30 = IMAGE
        					30{
          						file = uploads/tx_tllbaseext/act_right.gif 
          						align = r 
          						offset = 0,34       
        					}
        					
         					40 = TEXT
         					40 {
            						text.field = title
            						fontSize = 12
            						offset = 6,54
            						fontColor = #333333
            						#antiAlias = 1
        					}
        					
   					}
   					stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('|');"
   				}
   			}
   		}
   	}
   }
  } 
  ACT < .NO
  ACT{
   wrapItemAndSub = <li class="level1Act">|</li>
  }
  #IFSUB = 1
  #IFSUB < .NO
  #IFSUB {
  #    wrapItemAndSub = <li class="level1">|</li>
  #}
  #ACTIFSUB = 1
  ACTIFSUB < .NO
  ACTIFSUB.wrapItemAndSub = <li class="level1Act">|</li>
  
 }
 2 = TMENU
 2{
  expAll=0
  wrap = <ul class="m2">|</ul>
  NO{
   wrapItemAndSub = <li class="level2">|</li>
   XY = 100,20
   10 = TEXT
   10 {
   	text.field = title
        offset = 5,15
   }
  }
  ACT < .NO
  ACT{
    wrapItemAndSub = <li class="level2Act">|</li>
  }
   IFSUB < .NO
   IFSUB.wrapItemAndSub = <li class="level2">|</li>
   ACTIFSUB < .NO
   ACTIFSUB.wrapItemAndSub = <li class="level2Act">|
  }
}


 

/*============================MAINMENU====================================================*/


#navigationlbs a {
	color: #666;
}
#navigationlbs a:hover {
	color: #222;
}
#navigationlbs ul, #navigationlbs ul li {
	list-style-type : none;
	list-style-image: none;
	margin: 0px;
	padding: 0px;
}

#navigationlbs ul li li{
	float:none !important;
	
}
#navigationlbs ul li{
	float:left;
}
#navigationlbs ul{
	margin-top:20px;
	margin-left:24px;
}
/*=======LEVEL 1 =====================*/


#navigationlbs ul li a {
	display: block;
	/*width: auto;*/
	line-height: 1.6em;
	height: 34px;
	overflow:hidden;
	text-indent: -999em;
	background-repeat:no-repeat;
	/*background-color:yellow;*/
}


#navigationlbs ul li li a {
	text-indent: 0em;
	height:auto;
}
#navigationlbs ul li a:hover,
#navigationlbs ul li:hover a,
#navigationlbs ul li.sfhover a,
#navigationlbs ul li.level1Act a,
#navigationlbs ul li.level1ActIE a{
	background-position:0px -34px;
}

/*=======LEVEL 2 =====================*/

#navigationlbs ul li ul li {
	line-height: 1.4em;
}
#navigationlbs ul li ul li a {
	font-size:  0.8em;
	
}
#navigationlbs ul li ul li a:hover {
	color:#fff !important;	
	background-color:red;	
}
#navigationlbs ul li.level1 ul.m2,
#navigationlbs ul li.level1Act ul.m2 {
	padding: 0px 0px;
	position: absolute;
	left: auto;
	margin: -1px 0px 0px 0px;
	width: 150px;
	z-index: 20;
	background-color:white;
}


#navigationlbs ul li ul.m2 {
	display: none;
}
#navigationlbs ul li:hover.level1 .m2,
#navigationlbs ul li.sfhover .m2,
#navigationlbs ul li:hover.level1Act .m2, 
#navigationlbs ul li.over ul.m2 {
	display: block;
	border: 1px solid #FF3333;
	border-width:1px 1px 0px;
	background-color: #ffffff;
}
#navigationlbs ul li:hover.level1 .m2 a,
#navigationlbs ul li.sfhover .m2 a,
#navigationlbs ul li:hover.level1Act .m2 a,
#navigationlbs ul li.over ul.m2 a {
	padding: 0px 5px 0px 10px;
	/*width: 135px;*/
	border: 0px;
	color:#626262;
	line-height: 2em;
	border-bottom:1px solid #FF3333;
}
/*---------Level2 act-------------*/

#navigationlbs ul li.level1ActIE ul.m2 {
	position: relative;
	display: block;
	left: auto;
	margin: 0px;
	padding: 0px 0px 0px 10px;
	width: 140px;
	z-index: 10;
}

#navigationlbs ul li.level1ActIE ul.m2 li {
	line-height: 1.25em;
}
#navigationlbs ul li.level1ActIE ul.m2 li a {
	border: 0px;
	color: #777;
	display: inline;
}
#navigationlbs ul li.level1ActIE ul.m2 li.level2ActIE a,  #navigationlbs ul li.level1ActIE ul.m2 li.level2ActIE ul.m3 li.level3ActIE a {
	color: #000;
}
#navigationlbs ul li.level1ActIE ul.m2 li.level2ActIE ul.m3 li a {
	color: #666;
	padding-left: 10px;
}

sfHover = function(){
		var sfEls = document.getElementById("navlbs").getElementsByTagName("LI");
		for(var i=0; i<sfEls.length; i++){
			sfEls[i].onmouseover = function(){
				this.className += " sfhover";	
			}
			sfEls[i].onmouseout = function(){
				this.className = this.className.replace(new RegExp(" sfhover\\b"), "");	
			}
		}
}
if (window.attachEvent) window.attachEvent("onload",sfHover);