TYPO3 Typoscript Menü Snippets Überblick

### Typoscript Code ##########
lib.menu_links_bbs = HMENU
lib.menu_links_bbs {
  entryLevel = 0
  wrap = <div id='menutop'><img src='fileadmin/images/navitop.gif'></div>|<div id='menubottom'><img src='fileadmin/images/navibottom.gif'></div>
  1 = TMENU
  1{
    wrap = <ul id='menuList2'>|</ul>
    noBlur =1
    ACT = 1
    ACTIFSUB = 1
    NO{
      wrapItemAndSub = <li class='menuItem2'>|</li>
      ATagParams = class='menuLink2'
    }
    ACT{
      wrapItemAndSub = <li class='menuItem2'>|</li>
      ATagParams = class='menuLinkAct2'
    }
    ACTIFSUB{
      wrapItemAndSub = <li class='menuItem2'>|</li>
      ATagParams = class='menuLinkAct2'
    }
  }
  2 = TMENU
  2{
    noBlur = 1
    ACT = 1
    ACTIFSUB = 1
    wrap = <ul class='submenuList2'>|</ul>
    NO{
      wrapItemAndSub = <li class='submenuItem2'>|</li>
      ATagParams = class='submenuLink2'
    }
    ACT{
      wrapItemAndSub = <li class='submenuItem2'>|</li>
      ATagParams = class='submenuLinkAct2'
    }
    ACTIFSUB{
      wrapItemAndSub = <li class='submenuItem2'>|</li>
      ATagParams = class='submenuLinkAct2'
    }
  }
}

/*-------------CSS---------------------*/
a.menuLink2, a.menuLink2:link, a.menuLink2:visited {
  display:block;
  /*position:relative;*/
  height:17px;
  margin:0px;
  padding:2px;
  font-size:12px;
  font-weight: normal;
  padding-left:20px;
  text-decoration:none;
  background-color:#f3f1f1;
  background-image:url(../../../../uploads/tx_tllbaseext/schalter_navi.gif);
  background-repeat:no-repeat;
  background-position:top left;
  color:#0055aa;
 
}

a.menuLink2:hover {
  background-color:#dddddd;
  background-image:url(../../../../uploads/tx_tllbaseext/schalter_navi_act_blau.gif);
  background-repeat:no-repeat;
  background-position:top left;
  /*text-decoration: underline;*/
}

a.menuLinkAct2 {
  display:block;
  /*position:relative;*/
  height:17px;
  margin:0px;
  padding:2px;
  padding-left:20px;
  font-size:12px;
  font-weight: normal;
  text-decoration:none;
  background-color:#dddddd;
  background-image:url(../../../../uploads/tx_tllbaseext/schalter_navi_act_blau.gif);
  background-repeat:no-repeat;
  background-position:top left;
  color:#333333;
}

a.submenuLink2 {
  display:block;
  /*position:relative;*/
  /*height:16px;*/
  margin:0px;
  padding:1px;
  padding-left:30px;
  font-size:10px;
  font-weight: normal;
  text-decoration:none;
  background-image:url(../../../../uploads/tx_tllbaseext/schalter_subnavi.gif);
  background-repeat:no-repeat;
  background-position:top left;
  color:#666666;
}

a.submenuLink2:hover {
  text-decoration: underline;
}

a.submenuLinkAct2 {
  display:block;
  /*position:relative;*/
  /*background-color:#FFD5B1;*/
  color:#0055aa;
  /*height:15px;*/
  margin:0px;
  padding:1px;
  padding-left:30px;
  font-size:10px;
  font-weight: normal;
  text-decoration:none;
  background-image:url(../../../../uploads/tx_tllbaseext/schalter_subnavi.gif);
  background-repeat:no-repeat;
  background-position:top left;
}

#menuDiv2 {
  /*position:relative;*/
  width:179px;
  margin:0px;
  padding:0px;
  padding-top:0px;
  padding-left:2px;
  text-align:left;
  /*float:left;*/
}

li.menuItem2 {
  list-style-type:none;
  text-align:left;
  border-top:1px solid #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #cccccc;
 
}

li.submenuItem2 {
  list-style-type:none;
  color:#666666;
  text-align:left;
  border-top:1px solid #fff;
  border-bottom: 1px solid #fff;
}


#menuList2 {
  /*width:179px;*/
  margin:0px;
  padding:0px;
  border-bottom: solid 1px #fff;
  width:179px;
}

ul.submenuList2 {
  margin:0px;
  padding:0px;
  /*border-top: solid 1px #fff;*/
   
}