Zum Inhalt springen

CSS Dropdown-Menu und Explorer

Erstellt am 12. Juni 2007 · Noch keine Antworten

Tags: Frage

mike_mcfly ·

Ahoi zusammen,

ich habe versucht nach der Anleitung von Thomas Raithel ein CSS-Dropdown-Menu umzusetzen, siehe hier: http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue.html?no_cache=1

Funktioniert eigentlich auch bis auf den Explorer.

Hier die Seite, um die es geht:
http://www.ihre-malermeister.eu/index.php?id=3

Mit einem Wrapper (TypoScript) werden die Menu-Listenelemente umschlossen und mit dem für den Explorer nötigen JavaScript-Code erweitert:

### Menü ###
subparts.navi = HMENU
subparts.navi {

  ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
    }

    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
      NO.allWrap = <li>|</li>
      ACT.ATagParams = class="submenu"
    }

Soweit so gut.
Nur leider gibt Typo3 diesen Markup-Salat aus:

<ul class="menu"><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=16" onfocus="blurLink(this);">Home</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=4" onfocus="blurLink(this);">Unsere Leistungen</a><ul onmouseover="show(this)" onmouseout="hide(this)"><li><a href="index.php?id=12" onfocus="blurLink(this);">Tapezierarbeiten</a></li><li><a href="index.php?id=11" onfocus="blurLink(this);">Lackierarbeiten</a></li><li><a href="index.php?id=6" onfocus="blurLink(this);">Stuckarbeiten</a></li><li><a href="index.php?id=15" onfocus="blurLink(this);">Dekorative Maltechniken</a></li></ul></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=5" onfocus="blurLink(this);">Referenzen</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=13" onfocus="blurLink(this);">Über uns</a></li><li onmouseover="show(this)" onmouseout="hide(this)"><a href="index.php?id=14" onfocus="blurLink(this);">Kontakt</a></li></ul>

Eigentlich sollte es so in der Art ausschauen:

<ul class="menu">
  <li><a href="#">Ebene1 Punkt1</a></li>
  <li onmouseover="show(this)" onmouseout="hide(this)">
    <a href="#">Ebene1 Punkt2</a>
    <ul class="submenu" onmouseover="show(this)" onmouseout="hide(this)">
      <li><a href="#">Ebene2 Punkt1</a></li>
      <li><a href="#">Ebene2 Punkt2</a></li>
      <li class="active"><a href="#">Ebene2 Punkt3</a></li>
    </ul>
  </li>
  <li><a href="#">Ebene1 Punkt3</a></li>
  <li><a href="#">Ebene1 Punkt4</a></li>
</ul>

Ich bin blutiger Anfänger in Sachen Typo3 und verstehe einfach nicht, wie das Markup von Typo3 generiert wird.