Zum Inhalt springen

Hover-Menü - Probleme in der TypoScript-Umsetzung

Erstellt am 15. September 2008 · 2 Antworten · letzte Antwort am 15. September 2008

Tags: Frage

Infomatiker ·

Hallo zusammen,

ich habe mir ein schönes Hover-Menü mit CSS gestaltet, was ich jetzt gerne in Typo3 entsprechend darstellen würde.
Mein Template habe ich mit TemplaVoila eingebunden, und habe für mein Menu das <div id="nav"> gemappt.
Die 1. Ebene sieht auch genauso aus wie ich sie haben will. Allerdings bekomme ich diese Hover-Funktion nicht hin. Hab schon verschiedene Sachen ausprobiert, aber entweder zeigt er gar kein Untermenü an, oder er zeigt es nach einem Klick dauerhaft an.

Hier erstmal mein HTML-Code :

<div id="nav">
   <ul id="active_menu">
      <li>
         <dl>
            <dt><a href="#">TopEntry 1</a></dt>
         </dl>
      </li>
      <li>
         <dl>
            <dt><a href="#">TopEntry 2</a></dt>
            <dd><a href="#">Sub 1</a></dd>
            <dd><a href="#">Sub 2</a></dd>
            <dd><a href="#">Sub 3</a></dd>
         </dl>
      </li>
      <li>
         <dl>
            <dt><a href="#">Top Entry 3</a></dt>
         </dl>
      </li>
   </ul>
</div>

Die dt-Einträge "Top Entry 1 - 3" stehen in meinem Template dauerhaft da, die Einträge "Sub 1 - 3" sollen in diesem Fall nur erscheinen wenn ich mit der Maus über den Eintrag "Top Entry 2" fahre.
Wie gesagt, in meinem Template (ohne Typo3) klappt das auch wunderbar .. nur leider bekomme ich das im TypoScript einfach nicht hin.

Mein momentaner Stand des TypoScripts für das Menü (zur zeit blendet er das Untermenü dauerhaft ein, nachdem idh auf "Top Entry 2" klicke) :

## Menu [Begin]
lib.mainMenu= HMENU
lib.mainMenu {
   entryLevel = 0
   wrap = <ul id="active_menu">|</ul>
   1 = TMENU
   1 {
      NO = 1
      NO.allWrap = <li><dl><dt>|</dt></dl></li>
      RO = 1
      RO {
         wrapItemAndSub = <dd>|</dd>
      }
   }
   2 = TMENU
   2 {
      NO = 1
      NO.wrap = <dd>|</dd>
   }
}

Würde mich freuen, wenn mir jemand weiterhelfen könnte.

Danke und liebe Grüße
Infomatiker

Infomatiker ·

Heureka! Ich hab's gerade selbst hinbekommen ... *freu*

Wer sich für den TS-Auszug interessiert :

## Menu [Begin]
lib.mainMenu= HMENU
lib.mainMenu {
   entryLevel = 0
   wrap = <ul id="active_menu">|</ul>
   1 = TMENU
   1 {
      expAll = 1
      NO.wrapItemAndSub = <li><dl>|</dl></li>
      NO = 1
      NO.allWrap = <dt>|</dt>
   }
   2 = TMENU
   2 {
      NO.wrapItemAndSub = <dd>|</dd>
   }
}
SLAng ·

Es gibt keinen RO-Zustand im TMENU. Das musst du dann per CSS machen.

Das dt steht da dauerhaft, weil du das ja auch so definiert hast. Das dd hast du ja erst für die 2 Menüebene definiert. Allerdings überschreibst du dass allWrap aus Ebene 1 nicht mit dem wrap von Ebene 2, sondern fügst das höchstens hinzu.

Wenn dd und sub 1,2,3 also die 2. Ebene sein soll, dann wird das so niemals klappen, denn dafür baust du schon grundsätzlich das Menü falsch auf.

Die zweite Ebene braucht dann schonmal noch ein öffnendes ul und das li der ersten Ebene darf nicht geschlossen werden. Erst wenn die zweite Ebene beendet wird darf das li der ersten Ebene auch geschlossen werden. Mit allWrap wird das also niemals klappen. Das li gehört schonmal ins wrapItemAndSub.
Wie sich das mit dl,dt und dd verhält kann ich dir nicht sagen ob die auch geöffnet bleiben müssen.
Sicher ist aber das schon der Ausgangs-HTML-Code falsch ist.

Aus deinem HTML-Code geht leider nicht eindeutig hervor, ob Sub1,2,3 nun ein Untermenü ist oder nicht. In deinem TS sieht es aber danach aus.

EDIT: Zu spät... um so besser, aber falsch ist der Ausgabecode immer noch