[TYPO3-german] horizontales GMENU Positionierung 2. Ebene

[astrid haubold]

Super, vielen Dank! Das war genau das Richtige. Unten noch wie ich's 
genau gemacht habe.
Dankeschön nochmal und viele Grüße!
Astrid

Setup:
temp.menu = HMENU
temp.menu {
     stdWrap.wrap = <div id="menu" | </div>
     1 = GMENU
     1 {
         wrap = <ul class="menu">|</ul>
         NO = 1
         NO {
             allWrap = <li>|</li>
             XY = [10.w]+12,18
             10 = TEXT
                10 {
     	          fontFile = {$navi_font}
     	          fontSize = {$menu1_textsize}
     	          fontColor = {$menu1_color}
     	          text.field = title
                   offset = 0,15
                   spacing = 0
                   align = left
                   niceText = 1
    }
}
    RO < .NO
    RO = 1
    RO {
    10.fontColor = {$menu1_color_h}
}
    ACT < .NO
    ACT = 1
    ACT {
       allWrap = <li>|
       10.fontColor = {$menu1_color_a}
      }
}
     2 = GMENU
     2 {
         wrap = <ul>|</ul></li>
         NO = 1
         NO {
             allWrap = <li>|</li>
             XY = [10.w]+12,15
             10 = TEXT
             10 {
     	
     	      fontSize = {$menu2_textsize}
     	      fontColor = {$menu2_color}
     	      text.field = title
               offset = 0,15
               spacing = 0
               align = left
               niceText = 1
    }
}
      RO < .NO
      RO = 1
      RO {
        10.fontColor = {$menu2_color_h}
      }
      ACT < .NO
      ACT = 1
      ACT {
        allWrap = <li>|</li>
        10.fontColor = {$menu2_color_a}
    }
  }
}

das dazugehörige CSS:
#menu {
	position:absolute;
	z-index:200;
	top:70px;
	left:208px;
}
.menu li {
	position:relative;
	display:block;
	float:left;
}
.menu li ul {
	position:absolute;
	top:20px;
	margin-left:-39px;
}
.menu li ul li {
	float:none;
	display:block;
}

JoH asenau schrieb:

>>ich möchte zu einem horizontalen GMENU eine 2. Ebene so positionieren,
>>dass die Punkte der 2. Ebene vertikal direkt unter dem jeweils
>>zugehörigen Punkt der 1. Ebene stehen.
>>
>>Die Position soll dieselbe sein wie bei
>>GMENU_LAYERS, relativeToTriggerItem = 1
>>ich möchte das Ganze aber gerne ohne Javascript.
>>
>>Vielleicht denke ich falsch und es ist banal, bisher habe ich aber
>>nichts gefunden. Kann mir jemand helfen?
> 
> 
> Mein Ansatz wäre ein gemeinsamer Container für den Hauptpunkt und seine
> Unterpunkte. Die einzelnen Container der inaktiven und aktiven Punkte kannst
> Du dann mit "float" oder "position:absolute" nebeneinander positionieren.
> Dabei ergibt sich jedoch ggf. das Problem, daß der darunterliegende Inhalt
> nach unten verschoben würde, weswegen "position:absolute" vermutlich
> unproblematischer sein dürfte.
> 
> temp.blah = HMENU
> temp.blah {
>     1 = GMENU
>     1 {
>         wrap = <ul class="menu_level1">|<li class="clearer"><!-- 
> DUMMY--></li></ul>
>         NO = 1
>         NO {
>             allWrap = <li>|</li>
>         }
>         CUR = 1
>         CUR {
>             allWrap = <li class="current">|</li>
>         }
>         CURIFSUB = 1
>         CURIFSUB {
>             allWrap = <li class="current">|
>         }
>         ACT = 1
>         ACT {
>             allWrap = <li class="active">|
>         }
>     }
>     2 = GMENU
>     2 {
>         wrap = <ul class="menu_level2">|</ul></li>
>         NO = 1
>         NO {
>             allWrap = <li>|</li>
>         }
>         CUR = 1
>         CUR {
>             allWrap = <li class="current">|</li>
>         }
>     }
> }
> So in der Art.
> Zu beachten ist, der "offene" Wrap bei ACT und CURIFSUB für die 1. Ebene.
> Der wird dann durch den Wrap der 2. Ebene <ul>|</ul></li> geschlossen.
> Der DUMMY wird benötigt, um das "float" per "clear:both" wieder aufzuheben.
> 
> Positionieren kannst Du das jetzt z.B. mit:
> 
> .menu_level1 li {
>     display:block;
>     float:left;
> }
> 
> so geht's auch noch
> 
> temp.blah = HMENU
> temp.blah {
>     1 = GMENU
>     1 {
>         wrap = <ul class="menu_level1">|</ul>
>         NO = 1
>         NO {
>             allWrap = <li class="uid{elementUid}">|</li>
>             subst_elementUid = 1
>         }
>         CUR = 1
>         CUR {
>             allWrap = <li class="uid{elementUid} current">|</li>
>             subst_elementUid = 1
>         }
>         CURIFSUB = 1
>         CURIFSUB {
>             allWrap = <li class="uid{elementUid}" current>|</li>
>             subst_elementUid = 1
>         }
>         ACT = 1
>         ACT {
>             allWrap = <li class="uid{elementUid}" active>|</li>
>             subst_elementUid = 1
>         }
>     }
>     2 = GMENU
>     2 {
>         wrap = <ul class="menu_level2">|</ul></li>
>         NO = 1
>         NO {
>             allWrap = <li>|</li>
>         }
>         CUR = 1
>         CUR {
>             allWrap = <li class="current">|</li>
>         }
>     }
> }
> 
> und im CSS dann die absolute Positionierung:
> 
> .menu_level1 .uid123 {
>     position:absolute;
>     left:0px;
>     top:0px;
> }
> 
> 
> .menu_level1 .uid456 {
>     position:absolute;
>     left:120px;
>     top:0px;
> }
> 
> .menu_level1 .uid789 {
>     position:absolute;
>     left:250px;
>     top:0px;
> }
> 
> Wobei sich das Problem mit dem nach unten verschobenen Content auch für's
> erste Beispiel lösen läßt, indem Du beispielsweise den <ul> Container der
> ersten Ebene absolut positionierst und dann die Elemente darin per "float".
> Der nachfolgende Content muß in jedem Fall per padding oder margin nach
> unten verschoben werden, wenn Du absolut positionierst.
> 
> HTH
> 
> Joey
>