[TYPO3-german] horizontales GMENU Positionierung 2. Ebene

[JoH asenau]

> 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

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
openBC/Xing: http://www.cybercraft.de
T3 cookbook: http://www.typo3experts.com