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

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:

Bild: img42.imageshack.us/…/screenshotmappingsubmen.png
Abb. 1: Mapping (HTML Source Code)

Bild: img137.imageshack.us/…/screenshotmappingsubmen.png
Abb. 2: Mapping - Ergebnis des Submenu-Mapping

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

Bild: img43.imageshack.us/…/screenshotergebnis.png
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! Ich habe schon extrem-googling betrieben, aber nie richtig das gefunden, was ich brauch. Es ist doch bestimmt nicht so schwer. Mit einer 1-Ebenen-Navigation geht's doch auch. Fakt ist, ich brauche mehrere Ebenen (3)

Bin über jede noch so kleine Hilfe dankbar!

Ich bedanke mich schon mal im Voraus!

Marc

Als Newbee solltest Du Dich erstmal mit dieser Anleitung anfreunden:
http://www.mittwald.de/fileadmin/pdf/dokumentation.pdf

So hab auch ich angefangen, dort ist auch erklärt wie man mehrere Submenüs realisiert.

Wenn Du dann den TS-Code für dein Menü fertig hast, dann bidest du das bitte als Object Path in TemplaVoila ein: lib.leftNavi z.B.

Stefan

Vielen Dank für deine Antwort!

Schade! Ich dachte, ich kann TypoScript irgendwie umgehen. #paralyzed#
Aber es führt wohl kein anderer Weg dran vorbei. Am Besten wäre eine Extention für dynamische Aufklappmenüs, wo man einstellen kann "horizontal" oder "vertikal", wie viele Ebenen usw...

Falls es sowas gibt, sagt mir bitte Bescheid. Danke!

Ich folge deinem Rat und bin gerade dabei die Doku durchzuarbeiten. Die Dokumentation ist meiner Meinung nach verständlicher und einfacher als die auf typo3.org... das nur nebenbei.

Leider stehe ich dabei trotzdem schon vor dem ersten Problem:

HTML-Vorlage "vorlage.html":

<html>
<head>
<title>Deutsche TYPO3 Dokumentation</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="container">
<div id="header">
<img src="images/logo.png">
###TRAILER###
</div>
<div id="top">
###MENU_OBEN###
</div>
<div id="links">
###MENU_LINKS###
</div>
<div id="center">
###MITTE_CONTENT###
</div>
<div id="right">
###RECHTS###
</div>
<div id="footer">
###FOOTER###
</div>
</div>

Stylesheet "style.css":

body
{
	font-family:verdana;
}

h1
{
	font: normal 14px Helvetica,Verdana,Arial;
	font-weight: bold;
}

div,img
{
	margin:0;
	padding:0;
	border:0;
}

body
{
	text-align:center;
}

div#container
{
	width:980px;
	text-align:left;
	margin:0px auto;
}

div#top 
{
	font: bold 10px Verdana,Arial;
	clear:both;
	background-color:orange;
	text-align:right;
	color:#FFFFFF;
	padding:5px;
	padding-right:10px;
}

a.linkWeiss
{
	text-decoration:none;color:white;
}

a:hover.linkWeiss
{
	text-decoration:underline;
}

div#header
{
	background-color:white;
}

div#links
{
	float:left;
	width:180px;
	padding-top:37px;
	padding-bottom:10px;
	background-color:#CCCCCC;
}

div#center 
{
	float:left;width:600px;padding:10px;
}

div#head 
{
	font: normal 10px Helvetica,Verdana,Arial;
	text-align:right;
}

div#right
{
	float:left;width:160px;height:auto;padding:10px;
}

div#footer 
{
	clear:both;
	background-color:orange;
	padding:4px;
	padding-bottom:2px;
}

div#footer a
{
	text-decoration:none;color:white;
}

div#footer a:hover
{
	text-decoration:underline;
}

div#links_bottom
{
	text-align:center;
	background-color:#8BA2BA;
	margin-top:20px;
	padding-top:1px;
	padding-bottom:1px;
}

.float-left
{
	float:left;
}

/* Anpassungen IE */

*html div#container
{
	width:982px;
}

*html div#center
{
	float:left;width:620px;
}

*html div#footer,div#top
{
	width:980px;
}

Dateienupload habe ich wie in der Doku durchgeführt.

Im Template habe ich folgenden TS-Code:

seite = PAGE
seite {
	typeNum = 0
	stylesheet = fileadmin/style.css

	10 = TEMPLATE
	10.template = FILE
	10.template.file = fileadmin/vorlage.html
}

Laut Dokumentation sollte ich zumindest schon mal Folgendes sehen:
Bild: img36.imageshack.us/…/homepagem.png

und bei mir wird nur ne leere Seite angezeigt. Weiß jemand, warum???

Also wenn ich z.B. JavaScript oder PHP programmiere (HTML, CSS sowieso), sehe ich wenigstens Ergebnisse... Aber hier? Ich weiß, aller Anfang ist schwer, aber das ist schon etwas krass! Wenn nicht mal die einfachsten Sachen funktionieren. Vielleicht ist es ja nur 'ne Kleinigkeit!

Vielen Dank im Voraus!

Dann werden dir auch die Fehler angezeigt:
http://dmitry-dulepov.com/article/blank-empty-page-in-typo3.html

Nach Datenbankbereinigung und Löschen wurden wieder Inhalte angezeigt!