---
title: "xMENU_LAYERS mit mehr als 1 Subebene"
url: "https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-08-02"
last_reply: "2006-09-06"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# xMENU_LAYERS mit mehr als 1 Subebene

TYPO3 › Menüs · 4 Antworten · gestartet 2006-08-02

## Eröffnungsbeitrag

**fragile74** · 2006-08-02 · [Beitrag #1](https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene/1)

Hi,

wie gestalte ich denn ein GMENU_LAYERS Menü mit mehr als einer subebene ? Speziell die Ausrichtung der 2. Untermenüebene gestaltet sich schwierig, die klappt immer ganz links am Rand des Menüs und nicht relativ zum Parent-Menüpunkt auf...any ideas :D ?

Hab bisher folgenden Code :

```typoscript
page = PAGE
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
  layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden; 
  xPosOffset = -20
  lockPosition = x
  entryLevel = 1
  expAll = 1
  NO {
    backColor = #FFAB0E
    XY = [10.w]+80, 30
    10 = TEXT
    allWrap =  |
    10.text.field = title
    10.offset = 5,17
    10.fontColor = #FFFFFF
    10.fontFile = fileadmin/verdana.ttf
    10.fontSize = 13
    }
         }

page.10.2 = GMENU_LAYERS
page.10.2  {
    expAll = 1
    layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden; 
    xPosOffset = -20
    lockPosition = y
    NO {
    allWrap = |*| 
    backColor = #FFEEEE
    XY = 120, 18
    10 = TEXT
    10 {
      text.field = title
      offset = 5,12
      fontColor = #FFAB0E
      fontFile = fileadmin/fonts/verdana.ttf
      fontSize = 11
      niceText = 1
    }
  }

    }


page.10.3 = GMENU_LAYERS
page.10.3  {
   layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden; 
    xPosOffset = -20
    dontFollowMouse = 1
    NO {
    allWrap = <br />
    backColor = #FFEEEE
    XY=100,18
    10 = TEXT
    10 {
      text.field = title
      offset = 5,12
      fontColor = #FFAB0E
      fontFile = fileadmin/fonts/verdana.ttf
      fontSize = 11
      niceText = 1
    }
  }

}
page.10.4 = GMENU
page.10.4  {
    expAll = 1
    NO {
    allWrap = |*| <br />
    backColor = #FFEEEE
    XY=100,18
    10 = TEXT
    10 {
      text.field = title
      offset = 5,12
      fontColor = #FFAB0E
      fontFile = fileadmin/fonts/verdana.ttf
      fontSize = 11
      niceText = 1
    }
  }

}
```

Man kann das Ergebnis hier sehen : <http://www.calophainsloft.de/web/index.php?id=35>

## Antworten

### [#2](https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene/2) · Unbekannter Benutzer · 2006-08-02

Muss das ein GMENU werden oder ginge auch ein TMENÜ? Ich hab mir vor ein paar Tagen mit so einem DropDown und der Ausrichtung auch die Haare gerauft.
Meine Lösung sollte aber auch mit einem GMENÜ klappen...

Ich habe gerade nochmal deinen anderen Thread gelesen, wolltest du es nicht ursprünglich anders haben?
Ich bin heute über ein Tutorial zum Thema horizontales Menü gestolpert, vielleicht hilfts dir ja:

<http://www.alistapart.com/articles/hybrid/>

### [#3](https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene/3) · fragile74 · 2006-08-02

Hi, erstmal vielen Dank für den Link zu Hybrid-CSS-Menüs, das hilft mir evtl. auf der anderen Baustelle weiter...

Kannst du deinen TS-Code für dein TMENÜ mit mehr als 1 Subebene posten bzw. wenn du das nicht möchtest den "Kniff" zur ausrichtung der 2. Menüebene beschreiben ? Thx !

### [#4](https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene/4) · Unbekannter Benutzer · 2006-08-07

Sorry hat etwas gedauert...
Also ich habs mit normalem TMENU und CSS gelöst, das ginge dann sicher auch mit nem GMENU und CSS.

Hier mal der TS:

```typoscript
temp.dropmenu = COA
temp.dropmenu.wrap = <div id="dropdown">|<hr style="width:100%; visibility: hidden; clear: both; height: 0px;" /></div>

#


temp.dropmenu.10 = HMENU
temp.dropmenu.10.entryLevel = 1
temp.dropmenu.10 {
1 = TMENU
1.wrap = <ul>|</ul>
1.expAll = 1
1.noBlur = 1
1.NO = 1
1.NO{
stdWrap.case = upper
wrapItemAndSub = <li onmouseover="javascript: this.className+='over';" onmouseout="javascript: this.className=this.className.replace('over', '');"> | </li> 
}
}
 
temp.dropmenu.10.2 < temp.dropmenu.10.1
#temp.dropmenu.10.2.wrap = <div id="dropebene2"><ul>|</ul></div>
temp.dropmenu.10.3 < temp.dropmenu.10.1
```

Hier der passende CSS Code... Das Ding funktioniert im IE und FF über drei Ebenen und dazu auch zweireihig in der ersten Ebene, falls es zuviele Punkte werden... Die IE User müssen allerdings JS eingeschaltet haben sonst geht nichts.

```html
#dropdown {
font-family: verdana, sans-serif; 
width:800px; 
position:relative; 
font-size:0.85em;
z-index:81;
margin: 0;
padding: 0;
}
div#dropdown ul{
list-style: none;
padding: 0;
margin: 0; 
text-align: left;
}
div#dropdown ul li{
list-style: none; 
color: #626044;
float: left;
margin: 0;
text-align: left;
padding: 2px 0;

}
div#dropdown ul li a{
text-decoration: none;
color: #000; 
padding: 0;
margin: 0;
font-size: 13px;
text-align: left;
padding-left:10px; 
display:block;
}
div#dropdown ul li a:hover{

}

#dropdown li ul {
  float: left;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute; 
  top: auto;
  background: #00ff00;
  z-index: 50;
}
#dropdown li ul li{
  float:none;
  margin: 0;
  z-index: 50;
  padding: 5px 1px;
  background: #00ff00;
  text-align: left;
  width: 180px;
  display: block;
  }
#dropdown li ul a{
  padding: 0;
  margin: 0;
  display: block;
  z-index: 50;
  background:#00ff00;
  line-height: 1.1em;
}
#dropdown ul li ul li a{
  color: #000000;
 }
  
#dropdown li > ul > li a{
 color: #000000;
 }
  
#dropdown li > ul {
 margin: 0;
    padding: 0;
	top: auto;
	left: auto;
	width: 180px;
	z-index: 50;
	}
#dropdown li > ul > li {
 margin: 0;
  padding: 4px 1px;
  z-index: 50;
  top: auto;
  left: auto;
  font-weight: normal;
  }
#dropdown li ul a:hover{
  z-index: 50;
  position: relative;
  color: #000000;
  font-weight: normal;
  }
  
#dropebene2{
display:block;
position: absolute; 
top: auto;
left: auto;
background: red;
float: left;
}  
  
#dropdown li ul li ul li{
  padding: 0;
  z-index: 50;
  position: relative;
  top: -15px;
  left: 0px;
  padding: 4px 1px;
  background:#00ff00;
  text-align: left;
}

#dropdown li ul li ul{
  padding: 0;
  display: none;
  position: absolute; 
  top: auto;
  left: 180px;
  width: 180px;
  z-index: 50;
  background: #00ff00;
  
}

#dropdown li > ul > li > ul{

  background: transparent;
  
}

#dropdown li > ul > li > ul > li{
 margin: 0;
  padding: 4px 1px;
  z-index: 50;
  top: -15px;
  left: 0px;
  font-weight: normal;
  }

  

#dropdown li:hover ul { display: block; z-index: 150; font-weight: normal;}
#dropdown li.over ul  {display: block; z-index: 150; font-weight: normal;}
#dropdown li:hover ul li ul{ display: none; z-index: 150; font-weight: normal;}
#dropdown li.over ul  li ul{display: none; z-index: 150; font-weight: normal;}

#dropdown li ul li:hover ul { display: block; z-index: 150; font-weight: normal;}
#dropdown li ul li.over ul  {display: block; z-index: 150; font-weight: normal;}
```

Ich kommentiere es nicht, das ist mir jetzt gerade zu aufwendig. Da ist bestimmt einiges doppelt, wo man ein bisschen Code sparen könnte, aber so funktioniert es auf jeden Fall.
Grundsätzlich sind die Anweisungen mit den > Zeichen nur für FF um unterschiedliche Positionierungen in IE und FF hinzukriegen.
Müsste sogar valider Code sein.

### [#5](https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene/5) · fragile74 · 2006-09-06

Sodale,

nach dem Problem mit den horizontalen Menüpunkten habe ich nun auch das Problem mit mehr als einer Subebene im Menü gelöst. Dazu muß man Layer quasi schachteln, hier die entscheidenden Passagen aus meinem Typoscript, die Layerbreite muß in layer-style verringert werden, wenn man vertikal aufgelistete Submenüs will.

```typoscript
menu = PAGE

menu.bodyTag = <body background="fileadmin/menue_03.jpg" style="background-position: left; background-repeat: no-repeat;" topmargin = 0 leftmargin=300 rightmargin = 0>

menu.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php

menu.10 = HMENU
menu.10.1 = GMENU_LAYERS
menu.10.1 {
  dontHideOnMouseUp = true
  layerStyle = position:absolute;left:30px;top:25px;width:450px;VISIBILITY:hidden; 
  xPosOffset = -300
  lockPosition = x
  expAll = 1
  NO {
    backColor= #8ac2c2
    XY = [10.w]+61, 20
    10 = TEXT
    allWrap =  |
    10.text.field = title
    10.offset = 5,16
    10.fontColor = #FFFFFF
    10.fontFile = fileadmin/verdana.ttf
    10.fontSize = 14
    }
         }
menu.10.2 = GMENU_LAYERS
menu.10.2  {
    expAll = 1
    layerStyle = position:absolute;left:30px;top:15px;width:120px;VISIBILITY:hidden; 
    xPosOffset = -650
    lockPosition = x
    NO {
    allWrap = |*|
    backColor = #8ac2c2
    XY=[10.w]+25,18
    10 = TEXT
    10 {
      text.field = title
      offset = 5,10
      fontColor = #FFFFFF
      fontFile = fileadmin/fonts/verdana.ttf
      fontSize = 11
      niceText = 0
    }
  }
  	}

menu.10.3 = GMENU
menu.10.3.target=kontent
menu.10.3  {
    expAll = 1
    NO {
    allWrap = |*|
    backColor = #8ac2c2
    XY=[10.w]+25,18
    10 = TEXT
    10 {
      text.field = title
      offset = 5,10
      fontColor = #FFFFFF
      fontFile = fileadmin/fonts/verdana.ttf
      fontSize = 11
      niceText = 0
    }
  }
	}
```

"menu" ist Teil eines Framesets, also nicht wörtlich nehmen, da kann jedes PAGE-Objekt stehen....

Hope to have helped you,
Frank

---

Quelle: „xMENU_LAYERS mit mehr als 1 Subebene“, typo3.net, https://www.typo3.net/d/47483-xmenu-layers-mit-mehr-als-1-subebene
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.