TYPO3studio Home
Druckversion | Seite weiterempfehlen

Standardkonformes Menü

ich hab viele Codebeispiele gesehen für Menüs. Für mich funktioniert folgendes am besten:

temp.XHTMLMENU = HMENU
temp.XHTMLMENU {
    entryLevel = 1
    1 = TMENU
    1 {
      wrap = <ul>|</ul>
      noBlur = 1
      NO = 1
      NO.wrapItemAndSub = <li>|</li>
      NO.ATagTitle.field = subtitle // title
      ACT < .NO
      ACT.ATagParams = class="act"
     }
    2 < .1
    3 < .2
    4 < .3
  }

Erläuterung

Diese TypoScript erzeugt ein XHTML-konformes Element namens "temp.XHTMLMENU". Das kann man natürlich anders benennen.

Das komplette Layout wird durch ein CSS erledigt. Am besten packt man das ganze Menü in ein DIV-Tag mit einer ID, z.B.

<div id="menu1">###MENU1###</div>

Dann kann man mittels CSS die einzelnen Elemente sehr gut ansprechen. Ich hab mir mit einer Klasse "act" geholfen, um Menüelemente zu highlighten.

Natürlich kann man an dieser Stelle auch weitere Zustände definieren, z.B. CUR, IFSUB etc.

Wichtig ist, dass im HTML-Code die li-Tags nach evtl. eingerückten Unterpunkten erst wieder geschlossen werden. Daher "wrapItemAndSub". Optisch ändert sich zwar nicht viel, wenn man diese sofort schließt (je nach CSS-Ansprache), allerdings wäre das Menü dann nicht mehr standard-konform.

Die zweite bis vierte Menüebene erzeuge ich in diesem Fall ohne weitere Änderung als Kopie der ersten. Eine unterschiedliche Gestaltung ist auch hier eine reine CSS-Aufgabe.

Es ist also auch möglich, aus diesem HTML-Markup ein Reitermenü zu erzeugen oder (etwas simpler) ein horizontales Menü oben.

CSS Beispiel

Das Menü links auf dieser Seite ist z.B. so gestaltet (man sieht übrigens auch, dass beim Stehenbleiben mit der Maus auf einem Menüpunkt die "title Tags" aus dem Subtitle oder dem Titel der Seite selbst generiert werden).

Das Menü ist mit folgendem css Code gestaltet:

#left ul {
  list-style: none;
}
#left li a {
  padding: 5px 10px;
  display: block;
  font-weight: bold;
  color: #FF3300;
  text-decoration: none;
  /*min-height: 1em;*/ /* fuer moderne Browser */
  height: auto !important; /* fuer moderne Browser */
  height: 0.5em; /*fuer IE*/
  font-size: 1.1em;
  line-height: 1.1em;
  margin: 0;
  border: none;
}
#left li a.act {
  background: #FF3300;
  color: #FFFFFF;
}
#left li a:hover {
  background: #FF6600;
  color: #FFFFFF;
}
/*2. Menüebene*/
#left li li a {
  padding: 4px 20px;
  font-weight: normal;
  color: #999999;
}
#left li li a:hover, #left li li a.act {
  background: none;
  color: #000000;
}
/*3. Menüebene*/
#left li li li a {
  margin: 1px 0 0 17px;
  padding: 0 0 3px 20px;
}