Zum Inhalt springen

XHTMl-konforme Menüliste

Erstellt am 26. Januar 2007 · 4 Antworten · letzte Antwort am 26. Januar 2007

Tags: HTML & CSS, Frage

Mannimedia ·

Hallo,

ich bin gerade dabei mein erstes Projekt in Typo3 zu realisieren und gehe hierfür das Tutorial "Moderne Templateerstellung, Teil1" durch. Bisher finde ich auch alles sehr gut erklärt. Ich stehe nun aber vor dem Problem das mein Menü eine Liste ist und in der Ausgabe die Verschachtelung nicht stimmt. Ich habe hier im Forum auch schon einige Themen dazu gefunden, wurde aber nicht wirklich schlau daraus.

Mein TS sieht folgendermaßen aus:

// Menu 1 cObject
temp.menu_1 = HMENU
// First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
  wrap = <ul>|</ul>
 //Normal state properties
  NO.wrapItemAndSub = <li>|</li>
  //Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <li>|</li>
}
//Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
  wrap = <ul>|</ul>
  // Normal state properties
  NO.wrapItemAndSub = <li>|</li>
  // Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <li class="active">|</li>
}

Die Ausgabe ergibt folgende Liste:

<ul>
  <li><a href="index.php?id=400" onfocus="blurLink(this);">Startseite</a></li>
  <li><a href="index.php?id=401" onfocus="blurLink(this);">Unterseiten</a></li>
  <ul>
    <li class="active"><a href="index.php?id=399" onfocus="blurLink(this);">Seite 1</a></li>
    <li><a href="index.php?id=398" onfocus="blurLink(this);">Seite 2</a></li>
  </ul>
  <li><a href="index.php?id=401" onfocus="blurLink(this);">Lorem ipsum</a></li>
</ul>

Diese Liste ist aber leider nicht XHTML-konform und funktioniert auch nur im IE7. Ich bräuchte folgende Ausgabe:

<ul>
  <li><a href="index.php?id=400" onfocus="blurLink(this);">Startseite</a></li>
  <li><a href="index.php?id=401" onfocus="blurLink(this);">Unterseiten</a>
    <ul>
      <li class="active"><a href="index.php?id=399" onfocus="blurLink(this);">Seite 1</a></li>
      <li><a href="index.php?id=398" onfocus="blurLink(this);">Seite 2</a></li>
    </ul>
  </li>
  <li><a href="index.php?id=401" onfocus="blurLink(this);">Lorem ipsum</a></li>
</ul>

Bin über jeden Tip dankbar. Am liebsten noch über die die ich dann auch verstehe 😉

Viele Grüße
Manni

just2b ·

Hallo,

wenn du NO auf wrapItemAndSub setzt (was notwendig ist), dann musst du das auch beim ACT machen! also

ACT.wrapItemAndSub = <li class="active">|</li>

lg georg

Mannimedia ·

Super. Vielen Dank. Jetzt gehts. Damit ich es auch verstehe. wrapItemAndSub bedeutet dass er jetzt alle Menüpunkte der 2. Ebene mit den li's umschließt wenn der Menüpukt 1 aktiv ist?

LG
Manni

just2b ·

Hallo,

nicht ganz! wrapItemAndSub schließt die subitems in den wrap mit ein (soweit von dir korrekt). bei ACT wird halt eben noch eine CSS_klasse dazugehängt!

georg