---
title: "horizontales Menü mehrere Ebenen in TYPO3 einbinden"
url: "https://www.typo3.net/d/92802-horizontales-menue-mehrere-ebenen-in-typo3-einbinden"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2009-09-10"
last_reply: "2009-09-25"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# horizontales Menü mehrere Ebenen in TYPO3 einbinden

TYPO3 › Menüs · 1 Antwort · gestartet 2009-09-10

## Eröffnungsbeitrag

**Marc Gee** · 2009-09-10 · [Beitrag #1](https://www.typo3.net/d/92802-horizontales-menue-mehrere-ebenen-in-typo3-einbinden/1)

Hallo zusammen,

schön, dass es dieses Forum gibt! Bin Anfänger und hoffe, ihr könnt mir helfen.

Ich habe schon so viel probiert und bin schon am Verzweifeln.  :'(

Ich möchte doch nur dieses Menü einbinden:
<http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue-mit-3-ebenen.html>

So soll es zumindest vorerst aussehen:

[Bild: img4.imageshack.us/…/aufbaun.png](http://img4.imageshack.us/img4/6264/aufbaun.png)

die CSS pass ich noch an. Das ist auch nicht das Problem.

Folgenden TypoScript-Code habe ich:

```typoscript
### Menü ###
temp.menu = HMENU
temp.menu {
    ### 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, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    2 < .1
    3 < .1
    4 < .1
}

lib.container < temp.menu
```

und TypoScript zum Einbinden des JavaScripts:

```typoscript
page.headerData.120 = TEXT
page.headerData.120.value (
<script type="text/javascript">
    //<![CDATA[
     function show(element){
           element.className += "hover";
           }

   function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script>
)
```

und die CSS:

```html
<style type="text/css">
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>
```

Das ist ja alles schön und gut, aber ich jedes mal wenn ich das mache, erzeuge ich nur Fehler, entweder das Menü verschwindet im Main-Content-Bereich... Oder das Menü geht nur mit einer Ebene... Oder es wird ne leere Seite angezeigt... Oder page is not configured... Ich krieg die komischsten Sachen, nur kein vernünftiges Aufklappmenü hin!

Kann mir bitte jemand Schritt für Schritt (idiotensicher)  #giggle#  erklären, wie ich vorgehen muss?

Ich bin Anfänger und bin froh über jede Hilfe! Bitte nicht nur auf die mittwald-Dokumentation verweisen, die hab ich auch schon gelesen und komm trotzdem nicht zurecht.

HTML, CSS, PHP, JavaScript usw. ist ja kein Problem aber ich komm mit TYPO3 und TypoScript einfach nicht klar.... aber ich möchte es lernen!

Vielen Dank im Voraus!
Marc

## Antworten

### [#2](https://www.typo3.net/d/92802-horizontales-menue-mehrere-ebenen-in-typo3-einbinden/2) · Marc Gee · 2009-09-25

hab's nun selbst gelöst. Falls es jemanden interressiert:

das Zauberwort lautet "subparts". Die subparts müssen nur richtig in der Vorlage gesetzt werden und dann muss man diese im TypoScript richtig ansprechen:

```typoscript
### Menü ###
subparts.menu = HMENU
subparts.menu {
  ### 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"
    }

    2 < .1
    3 < .1
    4 < .1
}
```

---

Quelle: „horizontales Menü mehrere Ebenen in TYPO3 einbinden“, typo3.net, https://www.typo3.net/d/92802-horizontales-menue-mehrere-ebenen-in-typo3-einbinden
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.