GMENU_LAYERS

Es sollte für die Seite derdrink.net eine Navigation erstellt werden, die bei Rollover bereits aufklappt, da eine bestimmte Schrift benutzt werden musste, kam eigentlich nur GMENU_LAYERS in Frage.

Um diesen Menütyp zu benutzen, muss ein Script eingebunden werden, dazu schreibt man folgendes in das Template (in meinem Fall ein Basistemplate):
includeLibs.gmenu_layers = media/scripts/gmenu_layers.php

Das Menü habe ich wie in den Beispielen im Typo3 Buch und in den meisten Beispielen beschrieben erstellt. Wenn man erstmal angefangen hat zu verstehen, wofür die meisten parameter benötigt werden, dann gehts. Das Menü sollte wie folgt aussehen: Zwei Spalten mit einer festen Breite und Höhe oben auf einer Seite mit einer festen Breite (nämlich 900px), mittig ausgerichtet. Wenn in der linken Spalte ein Element berührt wird, werden die Untermenüpunkte in der rechten Spalte angezeigt, beginnend von oben und mit einer Art Sprechblase im Hintergrund.

Das Problem entstand erstmal dadurch, dass die Untermenüpunkte in Abhängigkeit von dem angewählten dargestellt wurden, also nicht von oben beginnend. Also setze ich die Variable lockPosition = x, was dazu führte, dass die x Position des Untermenüs sich plötzlich änderte. Dagegen half die Einstellung setFixedWidth = 0, was Typo3 annehmen ließ, alle Einträge seien 0px breit. Nun wurde das Menü zumindest immer an einer Stelle angezeigt, leider war es die linke Ecke der Seite, da gehörte es aber nicht hin.

Das setzen der Variable relativeToTriggerItem=1 zerstörte das Menü komplett, also blieb der Wert bei 0. In layerStyle gibt man die style-Eigenschaften der Layer an. Diese werden absolut positioniert. Dort einen Offset von links reinzuschreiben war nicht möglich, da die Position von der Breite des Browserfensters abhängt – der ganze Content ist ja mittig ausgerichtet.

Die Lösung war der folgende Ansatz: Die Layer bekommen die Style-Eigenschaft width: 100%; und top: 10px, neben den default-Werten position: absolute und visibility: hidden; Innerhalb des Layers wird die zweite Ebene aufgebaut, diese wurde in ein div gewrappt, das die Breite des Seitenelementes hatte ( 900px) und mittig positioniert. Innerhalb dieses divs war wieder ein div, das relativ positioniert wurde, an der Stelle, an der das Menü erscheinen sollte. Diesem div wurde der Sprechblasen-Hintergrund zugewiesen. Innerhalb diese Divs befinden sich nun die Links der zweiten Ebene. Das zweite Div musste mittels position versetzt werden, da das Setzen eines Wertes für margin bewirkt, dass die erste Menüspalte von dem Div überlagert wird und das Menü daher nicht funktioniert. So ist das Menü getestet in FF, IE7 und Opera.

temp.navi = HMENU
temp.navi.entryLevel = 1
temp.navi.1 = GMENU_LAYERS
temp.navi.1 {
layerStyle = position: absolute; visibility: hidden; width: 100%; top: 10px;
lockPosition = x
setFixedWidth = 0
relativeToTriggerItem = 0
freezeMouseover = 0
expAll = 1
displayActiveOnLoad = 1
dontHideOnMouseUp = 1
NO {
ATagParams = style=“height: 32px; width: 260px; display: block;“
XY = 260,28
backColor = #ffffff
transparentBackground = 1
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/templates/DINEngschrift.otf
10.fontColor = #116aae
10.fontSize = 20
10.offset = 0,22
# 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
}
RO < .NO RO { 10.fontSize = 24 10.offset = 0,22 20 = IMAGE 20.file = fileadmin/images/menu_pfeil.gif 20.offset = 251,5 } RO = 1 ACT < .RO ACT { 10.fontColor = #f7b221 20 >
}
ACT = 1
}
temp.navi.2 = GMENU
temp.navi.2 {
wrap =

NO {
ATagParams = style=“display: block; height: 32px;“
XY = 200,28
backColor = #ffffff
transparentBackground = 1
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/templates/DINEngschrift.otf
10.fontColor = #116aae
10.fontSize = 20
10.offset = 0,22
# 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
}
RO < .NO RO { 10.fontSize = 24 10.offset = 0,22 } RO = 1 ACT < .RO ACT { 10.fontColor = #f7b221 } ACT = 1 }