GMENU Submenuebene mit wechselndem durchgehendem Hintergrund

waumpada · #1 03.03.08, 21:07

Hi,

ich habe folgendes Problem:

Ich habe ein GMENU gebaut, das die einzelnen Menüpunkte abwechselnd mit weissem und hellblauem DIV-Hintergrund wrappt. Das funktioniert soweit ganz gut. Jetzt kommt aber die Submenüebene dazu, die ebenfalls weiss-blau wechseln soll, aber nicht bei jedem Submenubutton sondern über das ganze Submenu als Hintergrund hinweg.

Ich hab mir gedacht, ich mach das mit div-wraps und transparenten GMENU-Buttons, aber er wrappt mir ja jeden Menübutton einzeln, müsste aber, um das richtige Ergebnis zu bekommen, den jeweils ausgewählten Hauptmenubutton einschliesslich aller Submenubuttons mit ein und der selben div-hintergrundfarbe wrappen.

Hier das TS:

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:

# Das linke Vertikalmenü erstellen
MENU_LINKS = HMENU
MENU_LINKS {

                 # Das Menü erstellen
special = directory
special.value = 44
entryLevel = 2
1 = GMENU
1.NO = 1
1.NO {
XY = 180, 21+[16.h]
backColor = #FFFFFF
transparentColor = #FFFFFF
wrap = <div id="lmenuweissoben">|</div> |*| <div id="lmenublau">|</div> || <div id="lmenuweiss">|</div>

                              # Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = _
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 11
                              # 10.niceText = 1
10.offset = 10, 15

                              # Image auf den Menüpunkt rendern
                              # 12 = IMAGE
                              # 12.file = fileadmin/images/muster_blau.gif
                              # 12.offset = 6, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.offset = 10, 25

                              # Hilfsebene zur Berechnung der Höhe von  Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 14
16.offset = 1000, 1000

}

                         # Roll-Over-Effekt einbauen
1.RO < .1.NO
1.RO {

                              # Roll-Over-Textfarbe
10.fontColor = #006ab3

                              # Roll-Over-Image auf den Menüpunkt rendern
                              # 12 = IMAGE
                              # 12.file = fileadmin/images/muster_blau_o.gif
                              # 12.offset = 6, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.fontColor = #006ab3
13.offset = 10, 25

}

                         # Aktuelle Seite im Roll-Over-Zustand halten
1.ACT < .1.RO

                         # Die zweite Navigationsebene anlegen
2 = GMENU
2.NO = 1
2.NO {
XY = 180, 21+[16.h]
backColor = #FFFFFF
transparentColor = #FFFFFF
wrap = <div id="lmenuweissobensub">|</div> |*| <div id="lmenuweisssub">|</div> || <div id="lmenuweisssub">|</div>

                              # Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = _
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 11
                              # 10.niceText = 1
10.offset = 25, 15

                              # Image auf den Menüpunkt rendern
12 = IMAGE
12.file = fileadmin/images/submenu.gif
12.offset = 10, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.offset = 25, 25

                              # Hilfsebene zur Berechnung der Höhe von  Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 14
16.offset = 1000, 1000

}

                         # Roll-Over-Effekt einbauen
2.RO < .2.NO
2.RO {

                              # Roll-Over-Textfarbe
10.fontColor = #006ab3

                              # Roll-Over-Image auf den Menüpunkt rendern
12 = IMAGE
12.file = fileadmin/images/submenu_o.gif
12.offset = 10, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.fontColor = #006ab3
13.offset = 25, 25

}

                         # Aktuelle Seite im Roll-Over-Zustand halten
2.ACT < .2.RO
}

Ergebnis:

Beim weissen Submenü ist es ja richtig (da ja im wrap der 2. GMENU-Ebene weiss als transparente HG-Farbe angegeben ist) :

Beim blauen Submenu falsch, weil ja jeder Subbutton einzeln umwrappt ist und nicht der jeweilige Hauptmenubutton sowie die dazuehörigen Submenubuttons als Gesamtheit umwrappt sind:

Es sollte aber richtigerweise so aussehen:

Kann mir jemand hier helfen. Ich wäre echt dankbar.

Lg, waumpada

**david** · #2 03.03.08, 21:54

Du hast in Zeile 75 "backColor = #FFFFFF" stehen, da müßte doch der Code für Blau stehen, oder?

waumpada · #3 03.03.08, 22:19

Hi David,

ja, das ist auch korrekt so, da #FFFFFF die transparente Farbe ist, die die div-Backgroundcolor durchscheinen lässt. Setze ich die backColor in Zeile 75 auf blau, dann macht es mir zwar die Submenüs jetzt schön blau, aber in den Sektionen wo die Submenüs weiss sein sollen ("Über uns") sind sie dann auch blau.

Lg, waumpada

**david** · #4 03.03.08, 22:36

Dann musst Du wahrscheinlich die CSS-Klasse für die 2.NO-Links ändern oder halt 2.NO.wrap. Der Hintergrund für <div id="lmenuweisssub">|</div> ist jetz wahrscheinlich auch weiss, hier muss dann halt <div id="lmenublausub">|</div> stehen - mit entsprechender Farbzuweisung im CSS.
Hoffe das stimmt so

waumpada · #5 03.03.08, 22:49

Ja, das hatte ich anfänglich auch so, nur beziehen sich die 2.NO-wraps immer auf die einzelnen Submenübuttons und nicht auf die ganze Submenüebene. Deswegen schaut dann die Submenüebene auch weiss-blau-weiss-blau-etc... aus. Sie soll aber je nach Hauptmenüfarbe entweder weiss-weiss-weiss-weiss-etc... oder blau-blau-blau-blau-etc... sein.

Mein Problem ist, dass ich nicht weiss, wie ich den entsprechenden Hauptmenübutton UND die dazugehörige gesamte Submenübebene z.B.: komplett weiss bzw. komplett blau wrappe. Ich dachte mit "wrapItemAndSub" geht's aber das funktioniert anscheinend nur mit TMENU.

Lg, waumpada

**david** · #6 03.03.08, 22:58

kannst du mal das css zum menu posten?

waumpada · #7 03.03.08, 23:13

Bitteschön:

Zitat:

div#lmenuweissoben {
background-color: #FFFFFF;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div#lmenublau {
background-color: #e7f4fd;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div#lmenuweiss {
background-color: #FFFFFF;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div#lmenuweissobensub {
background-color: transparent;
border-right: 2px solid #dbe3e6;
}

div#lmenublausub {
background-color: #e7f4fd;
border-right: 2px solid #dbe3e6;
}

div#lmenuweisssub {
background-color: transparent;
border-right: 2px solid #dbe3e6;
}

**david** · #8 04.03.08, 00:26

Ok, jetzt habe ich eine Lösung.
Doch zuerst einige Punkt:

Die Lösung funktioniert wahrscheinlich nicht auf IE6 und früher
Die Lösung ist CSS-basiert, ändert also nichts wesentliches am TS
in den HTML-Tags habe ich "id" gegen "class" ausgetauscht, da man ids nicht mehrmals vergeben sollte.
Die beiden letzten Blöcke vom CSS müßten noch verlängert werden um soviele Zeilen, wie Du Zeilen im Submenü hast und jeweils das letzte Element einmal mehr angehängt bekommen (mit dem "+"-Zeichen). Ist uncool aber per CSS fällt mir momentan nichts besseres ein.

So hier die geänderten Skripte:

HTML-Code:

<style>
div.lmenuweissoben {
background-color: #FFFFFF;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div.lmenublau {
background-color: #e7f4fd;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div.lmenuweiss {
background-color: #FFFFFF;
border-top: 2px solid #dbe3e6;
border-right: 2px solid #dbe3e6;
}

div.lmenuweissobensub {
background-color: transparent;
border-right: 2px solid #dbe3e6;
}

div.lmenublau,
div.lmenublau + div.lmenuweissobensub,
div.lmenublau + div.lmenuweissobensub + div.lmenuweisssub,
div.lmenublau + div.lmenuweissobensub + div.lmenuweisssub + div.lmenuweisssub, 
div.lmenublau + div.lmenuweissobensub + div.lmenuweisssub + div.lmenuweisssub + div.lmenuweisssub {
background-color: #e7f4fd;
border-right: 2px solid #dbe3e6;
}

div.lmenuweiss,
div.lmenuweiss + div.lmenuweissobensub,
div.lmenuweiss + div.lmenuweissobensub + div.lmenuweisssub,
div.lmenuweiss + div.lmenuweissobensub + div.lmenuweisssub + div.lmenuweisssub, 
div.lmenuweiss + div.lmenuweissobensub + div.lmenuweisssub + div.lmenuweisssub + div.lmenuweisssub {
background-color: transparent;
border-right: 2px solid #dbe3e6;
}
</style>

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:

# Das linke Vertikalmenü erstellen
MENU_LINKS = HMENU
MENU_LINKS {

                 # Das Menü erstellen
special = directory
special.value = 1049
#entryLevel = 2
1 = GMENU
1.NO = 1
1.NO {
XY = 180, 21+[16.h]
backColor = #FFFFFF
transparentColor = #FFFFFF
allWrap = <div class="lmenuweissoben">|</div> |*| <div class="lmenublau">|</div> || <div class="lmenuweiss">|</div>

                              # Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = _
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 11
                              # 10.niceText = 1
10.offset = 10, 15

                              # Image auf den Menüpunkt rendern
                              # 12 = IMAGE
                              # 12.file = fileadmin/images/muster_blau.gif
                              # 12.offset = 6, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.offset = 10, 25

                              # Hilfsebene zur Berechnung der Höhe von  Men?punkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 14
16.offset = 1000, 1000

}

                         # Roll-Over-Effekt einbauen
1.RO < .1.NO
1.RO {

                              # Roll-Over-Textfarbe
10.fontColor = #006ab3

                              # Roll-Over-Image auf den Menüpunkt rendern
                              # 12 = IMAGE
                              # 12.file = fileadmin/images/muster_blau_o.gif
                              # 12.offset = 6, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.fontColor = #006ab3
13.offset = 10, 25

}

                         # Aktuelle Seite im Roll-Over-Zustand halten
1.ACT < .1.RO

                         # Die zweite Navigationsebene anlegen
2 = GMENU
2.NO = 1
2.NO {
XY = 180, 21+[16.h]
backColor = #FFFFFF
transparentColor = #FFFFFF
wrap = <div class="lmenuweissobensub">|</div> |*| <div class="lmenuweisssub">|</div> || <div class="lmenuweisssub">|</div>

                              # Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = _
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 11
                              # 10.niceText = 1
10.offset = 25, 15

                              # Image auf den Menüpunkt rendern
12 = IMAGE
12.file = fileadmin/images/submenu.gif
12.offset = 10, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.offset = 25, 25

                              # Hilfsebene zur Berechnung der Höhe von  Men?punkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 14
16.offset = 1000, 1000

}

                         # Roll-Over-Effekt einbauen
2.RO < .2.NO
2.RO {

                              # Roll-Over-Textfarbe
10.fontColor = #006ab3

                              # Roll-Over-Image auf den Menüpunkt rendern
12 = IMAGE
12.file = fileadmin/images/submenu_o.gif
12.offset = 10, 0

                              # Eine ggf. vorhandene zweite Menütextzeile anzeigen lassen
13 < .10
13.text.listNum = 1
13.fontColor = #006ab3
13.offset = 25, 25

}

                         # Aktuelle Seite im Roll-Over-Zustand halten
2.ACT < .2.RO
}

**david** · #9 04.03.08, 00:30

Als Alternative kannst Du natürlich auch eine PHP-Funktion schreiben, die Du in das Menu einbindest. Dort ist man wesentlich variabler mit der Gestaltung und der Syntax.

waumpada · #10 04.03.08, 03:39

Hi David,

danke für Deine Hilfe.

Der IE7 hat immer noch Schwierigkeiten mit dem +-sibling-selector. Im Firefox funktionierts dafür einwandfrei

Wahrscheinlich werd ich um eine PHP-Funktion nicht herumkommen. Wie binde ich die am besten ein. Als Extension oder per PhP-Element? Bin hier noch nicht so bewandert und für jeden Tipp dankbar.

Danke auf jeden Fall für Deine Hilfe.

Lg, Hannes

Suche

Userpanel

GMENU Submenuebene mit wechselndem durchgehendem Hintergrund