TemplaVoila - Menü mehrere Ebenen - Submenü lässt sich nicht mappen

**Marc Gee** · 08.09.2009, 08:21

Hallo zusammen,

sorry, ich bin Anfänger in Typo3/TemplaVoila und hoffe, ihr könnt mir helfen. Mit TV soll ja das Templating so einfach sein und damit wollte ich mir den Einstieg etwas erleichtern. Ich möchte folgenden Seitenaufbau:

- Banner
- horizontale Navigation mit mehreren Ebenen
- Inhalt

Klappt super, wenn ich ein "normales" Menü ohne mehrere Ebenen, verwende, nützt aber nichts! - Ich brauche ein Menü mit mehreren Ebenen (mind. 3)

HTML-Vorlage sieht so aus:

HTML-Code:

<html>
<head>
 <title>Template</title>
<style type="text/css">
body
{
 font-family:verdana;
 font-size:10pt;
}
div#inhalt
{
 position:absolute;
 top:95px;
 left:10px;
}
ul.menu, ul.menu ul {
    list-style-type: none;
}
ul.menu a {
    display: block;
    padding: 3px 10px 3px 10px;
    font-weight: normal;
}
ul.menu li {
    padding: 0;
    margin: 0;
    float: left;
    background-color: #FFF9E4;
    border:1px solid #26383D;
    height: 20px;
}
/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
    float:none;
    background-color: transparent;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover {
    background-color: #FFF9E4;
}
/* Zweite Ebene */
        ul.menu ul {
              margin:0;
                 padding: 0;
               position: absolute;
               background-color: #26383D;
                border: 1px solid #FFF9E4;
                display: none;
                    width: 180px;
     }
   /* Zweite Ebene anzeigen */
       ul.menu li.hover ul, ul.menu li:hover ul  {
               display: block;
   }
/* Dritte Ebene */
   ul.menu li.hover ul ul, ul.menu li:hover ul ul {
                  display: none;
                    margin-left: 160px; /* Breite eines Listenelements - Überlagerung */
              margin-top: -20px; /* Höhe eines Listenelements */
        }
   /* Dritte Ebene anzeigen */
       ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
                display: block;
   }
 
/* Vierte Ebene */
     ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
                  display: none;
    }
   /* Vierte Ebene anzeigen */
       ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
               display: block;
   }
</style>
<script type="text/javascript">
    //<![CDATA[
  function show(element){
           element.className += "hover";
   }
 function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script>
</head>
<body>
<div id="banner">
<p>Hier kommt der Banner hin!</p>
</div>
 
        <ul class="menu">
          <li onmouseover="show(this)" onmouseout="hide(this)">
            <a href="#">Ebene 1 - Punkt 1</a>
            <ul>
              <li onmouseover="show(this)" onmouseout="hide(this)">
                <a href="#">Ebene 2 - Punkt 1</a>
                <ul>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 1</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 2</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 3</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li onmouseover="show(this)" onmouseout="hide(this)">
                <a href="#">Ebene 2 - Punkt 2</a>
                <ul>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 1</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 2</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 3</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li onmouseover="show(this)" onmouseout="hide(this)">
            <a href="#">Ebene 1 - Punkt 2</a>
            <ul>
              <li onmouseover="show(this)" onmouseout="hide(this)">
                <a href="#">Ebene 2 - Punkt 1</a>
                <ul>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 1</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 2</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 3</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li onmouseover="show(this)" onmouseout="hide(this)">
                <a href="#">Ebene 2 - Punkt 2</a>
                <ul>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 1</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 2</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 3</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li onmouseover="show(this)" onmouseout="hide(this)">
                <a href="#">Ebene 2 - Punkt 3</a>
                <ul>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 1</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 2</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                    </ul>
                  </li>
                  <li onmouseover="show(this)" onmouseout="hide(this)">
                    <a href="#">Ebene 3 - Punkt 3</a>
                    <ul>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 1</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 2</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 3</a></li>
                      <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Ebene 4 - Punkt 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
 
<div id="inhalt">
<p>Hier kommt der Inhalt hin.</p>
</div>
</body>
</html>

Ich wähle diese HTML-Datei als Vorlage in TemplaVoila aus, anschließend gehe ich auf mappen und beim Untermenü gibt's Probleme, siehe Screenshots:

Abb. 1: Mapping (HTML Source Code)

Abb. 2: Mapping - Ergebnis des Submenu-Mapping

Das komische ist, auch wenn das mappen des sub menüs fehlerhaft war, wird Folgendes angezeigt:

Abb. 3: Ergebnis im Frontend

Wie krieg ich es hin, das Untermenü richtig zu mappen?
Wieso ist das Untermenü so komisch transparent, obwohl ich das gar nicht so im CSS definiert habe?

Bitte helft mir!!!!

Ich hänge schon seit ein paar Tagen an diesem Problem und komme nicht weiter!

Vielen Dank im Voraus!

Marc

**Marc Gee** · 08.09.2009, 14:38

Kann mir denn keiner helfen?

Mir ist aufgefallen, dass das Thema schon über 70 mal angeschaut wurde... es gibt bestimmt fähige Leute, die mir helfen können.

Bitte versetzt euch mal in die Lage eines Anfängers. Ihr habt doch bestimmt auch mal klein angefangen und wart über jede, auch noch so kleine Hilfe froh!

Ich bedanke mich schon mal im Voraus!

**cobu** · 08.09.2009, 20:22

Die Untermenüs erzeugst du anschließend automatisch mit Typoscript, deswegen brauchst du sie an der Stelle nicht zu mappen. Etwas, was sich innerhalb eines gemappten Bereichs befindet, kannst du auch nicht noch anderweitig mappen.

**Marc Gee** · 10.09.2009, 07:21

Danke für die Antwort!
Ich werde mich wohl oder übel noch mehr mit TypoScript auseinandersetzen dürfen. Führt wohl kein anderer (einfacherer) Weg dran vorbei...

Trotzdem danke!