---
title: "Vorhandenem Menü eine 2. und 3. Ebene geben?"
url: "https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2009-04-26"
last_reply: "2009-04-27"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Vorhandenem Menü eine 2. und 3. Ebene geben?

TYPO3 › Menüs · 3 Antworten · gestartet 2009-04-26

## Eröffnungsbeitrag

**jschuhma** · 2009-04-26 · [Beitrag #1](https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben/1)

Hallo miteinander,

ich bin gerade dabei dieses Menü zu realisieren (<http://www.janschuhmacher.info/temp/menu/>)
Die erste Ebene habe ich jetzt hinbekommen, mein Code lautet wie folgt:

```typoscript
tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
 wrap = <div id="ebene01"> | </div>
 1 = TMENU
 1 {
  wrap = <ul> | </ul>
   NO = 1
   NO.wrapItemAndSub = <li> | </li>
   ACT = 1
   ACT < .NO
   ACT.ATagPatams = id=current
   }
}
```

Das funktioniert perfekt, auch alle CSS-Angaben werden korrekt angezeigt.
Ich weiß jetzt nur nicht wie ich meine 2. Menüebene einfügen muss?

Im Template sind sie wie folgt aufgebaut:

```html
<div id="menu">	
<!-- ###HAUPT_NAVI### start-->
<div id="navibereich">
   <ul id="ebene01">
      <li id="navi01"><a href="index.html"><strong>Home</strong></a></li>
      <li id="navi02"><a href="#"><strong>Technik</strong></a>
         <ul class="ebene02">
            <li id="navi0201"><a href="#">Kamera</a>
               <ul class="ebene0201">
                  <li id="nav020101"><a href="#">Funktionsweise</a></li>
                  <li id="nav020102"><a href="#">Kameratypen</a></li>
               </ul>
            </li>   
            <li id="navi0202"><a href="#">Objektiv</a>
               <ul class="ebene0202">
                  <li id="nav020201"><a href="#">Funktionsweise</a></li>
                  <li id="nav020202"><a href="#">Kameratypen</a></li>
               </ul>
            </li>   
            <li id="navi0203"><a href="#">Sonstiges Equipment</a>
               <ul class="ebene0203">
                  <li id="nav020301"><a href="#">Blitz</a></li>
                  <li id="nav020302"><a href="#">Stativ</a></li>
                  <li id="nav020303"><a href="#">Filter</a></li>
                  <li id="nav020304"><a href="#">Streulichtblenden</a></li>
               </ul>
            </li>
            <li id="navi0204"><a href="#">Kaufberatung</a></li>
            <li id="navi0205"><a href="#">Geschichte</a></li>
         </ul>
      </li>
         
      <li id="navi03"><a href="#"><strong>Bildgestaltung</strong></a>
         <ul class="ebene02">
            <li id="navi0301"><a href="#">Grafische Grundlagen</a>
               <ul class="ebene0301">
                  <li id="nav030101"><a href="#">Blickrichtung</a></li>
                  <li id="nav030102"><a href="#">Gestaltungselemente</a></li>
                  <li id="nav030103"><a href="#">Bildaufteilung</a></li>
                  <li id="nav030104"><a href="#">Bildstil</a></li>
                  <li id="nav030105"><a href="#">Farbgestaltung</a></li>
               </ul>
            </li>   
            <li id="navi0302"><a href="#">Licht</a>
               <ul class="ebene0302">
                  <li id="nav030201"><a href="#">Was ist Licht?</a></li>
                  <li id="nav030202"><a href="#">Lichtarten</a></li>
                  <li id="nav030203"><a href="#">Lichtkontrolle</a></li>
                  <li id="nav030204"><a href="#">Lichtgestaltung</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li id="navi04"><a href="#"><strong>Bildnachbearbeitung</strong></a>
         <ul class="ebene02">
            <li id="navi0401"><a href="#">Basics</a>
               <ul class="ebene0401">
                  <li id="nav040101"><a href="#">Freistellen &amp; Drehen</a></li>
                  <li id="nav040102"><a href="#">Tonwertkorrektur</a></li>
                  <li id="nav040103"><a href="#">Abwedeln/Nachbelichten</a></li>
                  <li id="nav040104"><a href="#">Staub &amp; Störungen</a></li>
                  <li id="nav040105"><a href="#">Scharfzeichnen</a></li>
                  <li id="nav040106"><a href="#">Weichzeichnen</a></li>
                  <li id="nav040107"><a href="#">Bildgröße &amp; Verzerren</a></li>
                  <li id="nav040108"><a href="#">Farbbalance</a></li>
                  <li id="nav040109"><a href="#">Farbkorrektur</a></li>
                  <li id="nav0401010"><a href="#">Graditionskurve</a></li>
               </ul>
            </li>   
            <li id="navi0402"><a href="#">Software</a>
               <ul class="ebene0402">
                  <li id="nav040201"><a href="#">Photoshop</a></li>
                  <li id="nav040202"><a href="#">Lightroom</a></li>
                  <li id="nav040203"><a href="#">Aperture</a></li>
                  <li id="nav040204"><a href="#">Sonstige</a></li>
               </ul>
            </li>   
            <li id="navi0403"><a href="#">Archivierung</a>
               <ul class="ebene0403">
                  <li id="nav040301"><a href="#">Datentiefe &amp; Farbe</a></li>
                  <li id="nav040302"><a href="#">Dateiformat</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li id="navi05"><a href="#"><strong>Praxis</strong></a>
         <ul class="ebene02">
            <li id="navi0501"><a href="#">Inspiration</a></li>   
            <li id="navi0502"><a href="#">Workshop</a>
               <ul class="ebene0502">
                  <li id="nav050201"><a href="#">Licht</a></li>
                  <li id="nav050202"><a href="#">Schwarz/Weiß</a></li>
                  <li id="nav050203"><a href="#">HDR</a></li>
                  <li id="nav050204"><a href="#">Makro</a></li>
                  <li id="nav050205"><a href="#">Landschaft/Panorama</a></li>
                  <li id="nav050206"><a href="#">Nacht</a></li>
                  <li id="nav050207"><a href="#">Portrait</a></li>
               </ul>
            </li>   
      	</ul>      
      </li>
      <li id="navi06"><a href="#"><strong>Hochschule</strong></a>
         <ul class="ebene02">
            <li id="navi0601"><a href="#">Skripte</a></li>   
            <li id="navi0602"><a href="#">Studentische Arbeiten</a></li>   
      	</ul> 
      </li>
      
      <li id="navi07"><a href="#"><strong>Glossar</strong></a></li>
   </ul>
</div> 
<!-- ###HAUPT_NAVI### stop-->
```

Kann mir hier evtl jemand weiterhelfen?

Grüße Jan

*(crosspost bei <http://www.typo3forum.net>)*

## Antworten

### [#2](https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben/2) · Unbekannter Benutzer · 2009-04-26

Erstmal ist schon nen Fehler drinn:

ATagPatams gibts nicht. Es heißt ATagParams Das ACT = 1 ist überflüssig. Classen und Id's werden mit Anführungszeichen eingefasst.

Ansonsten erstellst du die zweite und dritte ebene genauso wie die erste.

So ist es korrekt:

```typoscript
tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
	wrap = <div id="ebene01">|</div>
	1 = TMENU
	1 {
		wrap = <ul>|</ul>
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		ACT < .NO
		ACT.ATagParams = id="current"
	}
	2 < .1
	3 < .1
}
```

Hier wird kopiert: 2 < .1 und hier 3 < .1 (Die 1. auf die zweite Ebene und die 1 auf die dritte) Sollte sich was ändern, dann kopierst du dennoch und füllst mit den Änderungen auf. Etwa so:

```typoscript
tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
	wrap = <div id="ebene01">|</div>
	1 = TMENU
	1 {
		wrap = <ul>|</ul>
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		ACT < .NO
		ACT.ATagParams = id="current"
	}
	2 < .1
	2 {
		NO.wrapItemAndSub = <li class="ebene2">|</li>
		ACT.ATagParams = id="current_ebene2"
	}
	3 < .1
	3 {
		NO.wrapItemAndSub = <li class="ebene3">|</li>
		ACT.ATagParams = id="current_ebene3"
	}
}
```

### [#3](https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben/3) · jschuhma · 2009-04-27

Vielen Dank für deine Antwort, das bringt mich ein gutes Stück weiter!
Aktuell (mit T3) ist es jetzt so, dass ich erst auf "Technik" klicken muss, dann bin ich im Bereich Technik, erst jetzt funktioniert aber die 2. Menüebene wenn ich einen Hover über Technik mache.

Ist es möglich, dass man nicht erst klicken muss und eine neue Seite aufgerufen wird, sondern das Untermenü direkt beim over erscheint?

Liegt es evtl daran, wie ich die Struktur angelegt habe?
[Bild: janschuhmacher.info/…/struktur.png](http://www.janschuhmacher.info/temp/struktur.png)

ich habe deinen code jetzt etwas abgeändert

```typoscript
tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
        wrap = <div id="ebene01">|</div>
        1 = TMENU
        1 {
                wrap = <ul>|</ul>
                NO = 1
                NO.wrapItemAndSub = <li>|</li>
                ACT < .NO
                ACT.ATagParams = id="current"
        }
        2 < .1
        2 {
                NO.wrapItemAndSub = <ul class="ebene02">|</ul>
                ACT.ATagParams = id="current_ebene2"
        }
        3 < .1
        3 {
                NO.wrapItemAndSub = <li class="ebene3">|</li>
                ACT.ATagParams = id="current_ebene3"
        }
}
```

Jetzt wird ebene 2 direkt beim Hover sichtbar, aber komischerweise sind nur 2 Punkte "halb"-sichtbar... als wären alle überlagert?

[Bild: janschuhmacher.info/…/menu_fehler.png](http://www.janschuhmacher.info/temp/menu_fehler.png)

### [#4](https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben/4) · Unbekannter Benutzer · 2009-04-27

Dann überprüf dein CSS mal...

---

Quelle: „Vorhandenem Menü eine 2. und 3. Ebene geben?“, typo3.net, https://www.typo3.net/d/89176-vorhandenem-menue-eine-2-und-3-ebene-geben
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
