TYPO3 Typoscript Menü Snippets Überblick

### Horizontales GMENU mit Layer ###
lib.menuHGM2 = HMENU
lib.menuHGM2 {
  ### Erste Ebene ###
    special = directory
    special.value = 3
    1 = GMENU
    1 {
      wrap = <ul class="menuHGM2">|</ul>
      expAll = 1
      noBlur = 1
      NO = 1
      NO{
        #wrapItemAndSub = <li onmouseover="showHGM2(this)" onmouseout="hideHGM2(this)">|</li>
        XY = [40.w]+10,29
        allWrap = <li onmouseover="showHGM2(this)" onmouseout="hideHGM2(this)">|</li>
        10 = IMAGE
        10{
          file = uploads/tx_tllbaseext/middle_no.gif
          offset = 5,0
          tile = 20          
        }
        20 = IMAGE
        20{
          file = uploads/tx_tllbaseext/left_no.gif
        }
        30 = IMAGE
        30{
          file = uploads/tx_tllbaseext/right_no.gif 
          align = r         
        }
        40 = TEXT
        40{
          offset = 5,20
          fontColor = black
          fontSize = 15
          text.field = nav_title // title
          fontFile = fileadmin/fonts/verdana.ttf
        }
		  }
      RO < .NO
      RO{
        10.file = uploads/tx_tllbaseext/middle_ro.gif
        20.file = uploads/tx_tllbaseext/left_ro.gif
        30.file = uploads/tx_tllbaseext/right_ro.gif 
        40.fontColor = #ffffff
      }
      ACT < .RO
      IFSUB < .NO
      IFSUB{
        allWrap = <li onmouseover="showHGM2(this)" onmouseout="hideHGM2(this)">|
      }
      ACTIFSUB < .RO
      ACTIFSUB{
        allWrap = <li onmouseover="showHGM2(this)" onmouseout="hideHGM2(this)">|
      }
      ACTRO <.RO
      ACTIFSUBRO <.RO
      IFSUBRO < .ACTIFSUBRO
      
    }

    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul onmouseover="showHGM2(this)" onmouseout="hideHGM2(this)">|</ul></li>
      expAll = 1
      NO = 1
      NO.allWrap = <li>|</li>
    }
}

ul.menuHGM2, ul.menuHGM2 ul {
    list-style-type: none;
}

ul.menuHGM2 a {
    display: block;
    padding: 3px 1px;
    font-weight:normal;
}

ul.menuHGM2 ul a {
    padding: 0 10px;
}

ul.menuHGM2 li {
    padding:0;
    margin:0;
    background-image: none;
    background-color: #FFF9E4;
    float:left;
}

ul.menuHGM2 ul {
    margin-left:0;
    padding: 0 0 5px 0;
    position: absolute;
    background-color: #ffffff;
    border:1px solid #cccccc;
    display:none;
    min-width:160px;
}

/* IE-Hack für die Breite */
*html ul.menuHGM2 ul {
    width:160px;
}

/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste  befindet (.hover siehe JavaScript oben) */
ul.menuHGM2 ul.hover, ul.menuHGM2 li.hover ul, ul.menuHGM2 li:hover ul  {
    display:block;
}

ul.menuHGM2 ul li {
    float:none;
    background-color: transparent;
}

/* Wird benötigt für den IE6 und älter */
function showHGM2(element){
		element.className += "hover";
	}
function hideHGM2(element){
		element.className = element.className = "";
	}