Typo3 - Baukasten

Navigation

CSS-Listen-Navigation

TypoScript - Setup

temp.navi_bulletList = HMENU
temp.navi_bulletList {
  #stdWrap.case = lower
  special = directory
  # Seitenid für den Einstieg
  special.value = 23
  # Seitenbaumebene ab Level2
  entryLevel = 0
  1 = TMENU
  1.noBlur = 1
  1.wrap = <ul>|</ul>
  1.NO = 1
  1.NO.linkWrap = <li>|</li>
  1.ACT = 1
  1.ACT.linkWrap = <li class="on">|</li>
  #1.ACTIFSUB = 1
  #1.ACTIFSUB.linkWrap = <li class="on">|</li>
}

Das Menü ist als Liste definiert:

HTML

<div id="menue_l1">
  <ul>
    <li><a href="http://www.alistapart.com/">Lorem eu</a></li>
    <li><a href="http://www.stylegala.com">Ipsum</a></li>
    <li><a href="http://www.css-praxis.de/">Nunc tellus</a></li>
    <li class="on"><a href="http://www.csshilfe.de/">Tincidunt laoreet</a></li>
    <li class="last"><a href="http://www.css4you.de">Faucibus</a></li>
  </ul>
</div> <!-- ende menue -->

CSS - Beispiel

/* Menue Level1 und Level2
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#menue_l1{
  float: left;
  margin: 0;
  height: 22px;
  width:649px;
}	
#menue_l1 {
  border-bottom: #7F7F7B solid 1px;
  background-color: #F3E4E4;
}
#menue_l1 ul{
  float: left;
  margin: 4px 0 0 16px;
  list-style: none;
}
#menue_l1 li{
  float:left;
  border-right: solid 2px #7F7F7B;
  padding: 0 8px 0 8px;
}
#menue_l1 li{
  font-size: 0.7em;
}
#menue_l1 a{
 display: block;
 position: relative;
}
#menue_l1 a{ 
  font-weight: bold;
}
#menue_l1 a:link, #menue_l1 a:visited{
 text-decoration: none;
 color: #353535;
}
#menue_l1 a:focus, #menue_l1 a:hover, #menue_l1 a:active{	
  color: #790525;
}
#menue_l1 li.on a {
  color: #790525;
}