TYPO3 Typoscript Menü Snippets Überblick

### Typoscript Code ##########
page.headerData.50 =  TEXT
page.headerData.50.value = <script type="text/javascript" language="JavaScript1.2" src="fileadmin/admin/js/horizontal_JS.js"></script>
 

lib.typox_layer = HMENU
lib.typox_layer {
  special = directory
  special.value = 3

  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul id="nav">|</ul>
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>

    IFSUB = 1
    IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
    #ACTIFSUB < .IFSUB
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = <li class="menuparent_act">|</li>
    #ACT = 1
    #ACT.wrapItemAndSub = <li class="menuparent_act">|</li>
   
  }
  2 < .1 
  2.wrap = <ul>|</ul>
  2.IFSUB.wrapItemAndSub = <li class="menuparent_act2">|</li>
  2.ACTIFSUB.wrapItemAndSub = <li class="menuparent_act2">|</li>
  3 < .2
  4 < .2
}

/*-------------CSS---------------------*/
#nav{
  width:auto;
  margin-bottom:4px;
}
#nav, #nav ul {
  float: left; 
  list-style: none;
  /*line-height: 1em;*/
  background: #2473b8;
  color: #fff;
  font-weight: bold;
  padding: 0;
  margin: 0;
  /*margin: 0 0 1em 0;*/
 
}
 
#nav a {
  display: block;
  font-weight:normal;
  color: #fff;
 
  text-decoration: none;
  /*padding: 0.25em 0em;*/
  padding: 4px 2px 0px 2px;
 
}
 
#nav li{
  float: left;
        display: block;
  font-family: Verdana, sanserif;
  
  color:white;
  text-decoration:none;
  height:26px;
  margin-right:1px;
  padding: 4px 4px 0px 4px;
  background-image:url(../../../../uploads/tx_tllbaseext/menu_bg_no.gif);
  background-repeat:x-repeat;
}
 
#nav li a:hover{
  color:#023b76;
}
#nav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 140px;
  font-weight: normal;
  border: 1px solid #ccc;
  margin: 8px 0px 0px -4px;
  background:#efefef;
}
 
#nav li li {
 
  width: 134px;
  /*height:15px;*/
  height:auto;
  text-decoration:none;
  font-weight:normal;
  padding:3px;
  background-image:none;
 
  background-color:#efefef;
  color:#333;
  border-bottom: 1px solid #fff;
}
#nav li li:hover, #nav li li.sfhover{
  width: 134;
  /*height:15px;*/
  height:auto;
  text-decoration:none;
  font-weight:normal;
  padding: 3px;
  background-image:none;
 
  background-color:#ccc;
  margin:0px;
  color:#fff;
}
 
#nav li ul a {
  width: 14em;
  /*padding-left: 1em;*/
  font-size:0.8em;
  color:#333;
}
 
#nav li ul ul {
  margin: -1.75em 0 0 137px;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
}
 
#nav li:hover, #nav li.sfhover {
  display:block;
  font-family: Verdana, sanserif;
  font-weight:normal;
  color:#023b76;
  text-decoration:none;
  height:26px;
  background-image:url(../../../../uploads/tx_tllbaseext/menu_bg_act.gif);
  background-repeat:x-repeat;
  margin-right:1px;
  padding: 4px 4px 0px 4px;
}
#nav li.menuparent_act{
  background-image:url(../../../../uploads/tx_tllbaseext/menu_bg_act.gif);
  background-repeat:x-repeat;
}
#nav li.menuparent_act2{
  background-image:url(../../../../uploads/tx_tllbaseext/dreieck_blau.gif);
  background-repeat:no-repeat;
  background-position:center right;
}
#nav li.menuparent_act a{
  color:#023b76;
}
#nav li.menuparent_act ul a{
  color:#333;
}
#nav li ul ul{
  margin: -20px 0px 0px 137px;
}

/*--------------------Javascript Code -----------------------------*/
sfHover = function() {
  var sfEls = document.getElementById("nav").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);