Hallo Leute,
nachdem TMENU_LAYERS mir nicht sonderlich gefiel, habe ich anderweitig versucht, ein Flyout-/Foldout-HMENU mit 3 Ebenen einzurichten.
Alle Ebenen sind <ul>-/<li>-Verschachtelungen, deren Text per negativem text-indent ausgeblendet ist, so dass die dynamisch generierten Background-Grafiken zu sehen sind.
Mein Problem: Alles funktioniert bis auf die Positionierung der dritten Ebene.
Die erste Ebene ist horizontal, die zweite klappt nach unten aus, und die dritte soll rechts vom jeweiligen Menüpunkt der zweiten Ebene aufklappen. Zweite und dritte Ebene überlappen sich jedoch.
Daher soll die <ul> um die dritte Ebene eine dynamische Style-Angabe für den Abstand nach links erhalten, die so breit ist wie die breiteste Hintergrundgrafik der zweiten Ebene.
Ich hoffe, das war jetzt nicht zu verworren. Hier zur Verdeutlichung mein TS:
###hier werden die dynamischen Hintergrundgrafiken ins CSS im head geladen
page.headerData.12345 = COA
page.headerData.12345 {
10 = TEXT
10 {
value (
<style>
)
}
30 = TEXT
30.dataWrap = {register:css_menue_ges} {register:css_menue_footer}
40 = TEXT
40.value = </style>
}
###hier werden die Hintergrundgrafiken generiert
temp.css_menue10 = COA
temp.css_menue10 {
10 = IMG_RESOURCE
10 {
file = GIFBUILDER
file {
XY = ...
#GIFBUILDER-blabla
...
}
stdWrap.wrap = { background-image: url(|); background-repeat:no-repeat;
}
15 = TEXT
15.value = width:
20 = TEXT
20.data = TSFE:lastImgResourceInfo|0
25 = TEXT
25.value = px;height:25px;}
}
temp.css_menue20 = ... #hier kommt der Rollover-Zustand, der später per CSS angesteuert wird...
... #blabla
###das Menü
temp.menu = HMENU
temp.menu {
wrap = <div class="navigation"><span class="left"><ul>|</ul></span></div>
1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO {
doNotLinkIt = 1
wrapItemAndSub = <li> | </li>
stdWrap.cObject = COA
stdWrap.cObject {
10 = LOAD_REGISTER
10.css_menue.cObject < temp.css_menue10
10.css_menue_hover.cObject < temp.css_menue20
10.css_menue_ges.cObject = TEXT
10.css_menue_ges.cObject.dataWrap = .mm_id{field:uid} {register:css_menue} .mm_id{field:uid}:hover {register:css_menue_hover} {register:css_menue_ges}
20 = TEXT
20 {
field = subtitle // nav_title // title
#value = <!-- -->
typolink {
ATagBeforeWrap = 1
wrap = <span>|</span>
parameter.field = uid
ATagParams.cObject = COA
ATagParams.cObject {
30 = TEXT
30.dataWrap = class="mm_id{field:uid}"
}
}
}
}
}
ACT < .NO
RO < .NO
ROIFSUB <.RO
IFSUB < .NO
ACTIFSUB < .ACT
CURIFSUB < .ACT
}
2 < .1
2 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub >
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li class="last">|</li>
}
NO.stdWrap.cObject.10.css_menue.cObject < temp.css_menue30
NO.stdWrap.cObject.10.css_menue_hover.cObject < temp.css_menue40
NO.stdWrap.cObject.20.typolink.parameter >
NO.stdWrap.cObject.20.typolink.parameter.field = uid
NO.stdWrap.cObject.20.typolink.ATagParams.cObject.30.dataWrap >
NO.stdWrap.cObject.20.typolink.ATagParams.cObject.30.dataWrap = class="mm_id{field:uid}"
RO < .NO
IFSUB < .NO
IFSUB
ACT >
ACT < .NO
CUR < .NO
ACTIFSUB < .NO
CURIFSUB < .NO
}
3 < .2
3 {
wrap >
stdWrap.dataWrap = <ul class="third_level" style="left:???">|</ul> #hier ist der Knackpunkt! Wo kriege ich die Breite der breitesten Hintergrundgrafik aus Ebene 2 her?
}
}
Danke schon mal für Tipps!
Grüße,
Bruder Chang
Ähhm, also ich könnte mir vorstellen, dass man das mit einem Register und if lösen kann. In der zweiten Ebene Register beschreiben mit der Breite des jeweiligen Bildes. Mit if aber einschränken, dass das Register nur dann geschrieben wird, wenn die Breite des aktuellen Bildes größer ist, als der Wert der schon im Register drin ist (Du musst dann natürlich jeweils am Anfang der zweiten Ebene das Register zurücksetzen.).
ABER: kannst du das nicht viel einfacher mit Javascript auslesen, das du ja ohnehin für das Menü brauchst?
Hi Kitsunet,
danke für die Anregung, aber JavaScript möchte ich erstens weitestgehend ausklammern (ich greife z.B. auf eine csshover2.htc-Datei per CSS-Behavior zurück), zumal ich es nicht sonderlich gut beherrsche.
Mit LOAD_REGISTER komme ich leider auch noch nicht so recht voran.
Wie kann man es mit LOAD_REGISTER bewerkstelligen, dass
1) entweder bei jedem Menüpunkt abgefragt wird, ob die vorliegende Hintergrundgrafik breiter ist als die des vorangehenden Menüpunkts (und dann der breitere Wert ins Register eingetragen wird) oder
2) welche die breiteste Hintergrundgrafik im aktuellen Abschnitt der zweiten Ebene ist?
Vielleicht stehe ich auch nur komplett auf dem Schlauch...
Mehr als das hier fällt mir jedenfalls nicht ein, doch das liefert ja auch immer nur die zuletzt generierte Breite:
[...]
2 < .1
2 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub >
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li class="last">|</li>
}
NO.stdWrap.cObject.10.css_menue.cObject < temp.css_menue30
NO.stdWrap.cObject.10.css_menue_hover.cObject < temp.css_menue40
NO.stdWrap.cObject.15 = LOAD_REGISTER
NO.stdWrap.cObject.15 {
maxwidth.cObject = TEXT
maxwidth.cObject.data = TSFE:lastImgResourceInfo|0
}
[...]
3 < .2
3 {
wrap >
stdWrap.dataWrap = <ul class="third_level" style="left:{register:maxwidth}px;">|</ul>
}
Danke im voraus!
NO.stdWrap.cObject.15 = LOAD_REGISTER
NO.stdWrap.cObject.15 {
maxwidth.cObject = TEXT
maxwidth.cObject.data = TSFE:lastImgResourceInfo|0
maxwidth.cObject.if.isGreaterThan.data = TSFE:lastImgResourceInfo|0
maxwidth.cObject.if.value.data = register:maxwidth
}
Das wär jetzt mal mein ungetesteter Vorschlag.
Hallo Kitsunet,
das hat leider nicht funktioniert. Ich habe auch noch weitere Möglichkeiten durchgespielt, wie man das mittels LOAD_REGISTER hinbekommen könnte, aber alles bislang vergebens.
Danke aber für Deine Hinweise.
Also,
ich dachte mir, ich mache das mal weniger kompliziert und weiche (leider) auf ein GMENU aus.
Leider stehe ich nun vor einem ähnlichen Problem: Ich kann die Breite der Grafiken im GMENU nicht auslesen.
Ich wollte eigentlich alle Menüpunkte ab der zweiten Ebene jeweils auf eine einheitliche Breite setzen, nämlich die des breitesten Menüpunkts (useLargestItemX = 1). Diese Breite möchte ich der dritten Ebene als Abstand nach links mitgeben, doch per TSFE:lastImageInfo|0 bekomme ich die Breite der Menüpunkte nicht heraus, da diese offiziell nicht als IMAGE-Objekte gelten (habe ich mir zurechtgereimt).
Weiß irgendwer, wie man die Breite von GMENU-Grafiken auslesen und wiederverwenden kann?
GMENU_LAYERS oder TMENU_LAYERS kommen für mich nicht in Frage...
Hier mein (unaufgeräumtes!) TS:
temp.menu >
temp.menu = HMENU
temp.menu {
excludeUidList = 29
wrap = <div class="navigation"><span class="left"><ul>|</ul></span></div>
1 = GMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO {
wrap = <li> | </li>
XY = [10.w]+15,25
backColor = #DC551B
transparentColor = #DC551B
4 = IMAGE
4.file = fileadmin/templates/gfx/btn_dummy_rt.gif
4.align = r,t
5 = BOX
5.dimensions = 0,0,4,25
5.color = #DC551B
5.align = l,t
6 = IMAGE
6.file = fileadmin/templates/gfx/btn_dummy_lt.gif
6.align = l,t
10 = TEXT
10 {
text.case = upper
text.field = nav_title // title
align=left
offset = 6,20
fontColor = #3F3F3F
fontFile = fileadmin/templates/fonts/GravurCondensed-Bold2.ttf
fontSize = 13
antiAlias = 1
niceText = 0
}
}
RO < .NO
RO {
10.fontColor = #DC551B
}
IFSUB < .NO
IFSUB.wrap = <li>|
ACTIFSUB < .IFSUB
CURIFSUB < .IFSUB
IFSUBRO < .IFSUB
IFSUBRO.10.fontColor = #DC551B
ACTIFSUBRO < .IFSUBRO
CURIFSUBRO < .IFSUBRO
}
2 < .1
2 {
useLargestItemX = 1
wrap = <ul>|</ul></li>
NO {
XY = [10.w]+5, 24
backColor = #ffffff
transparentColor = #ffffff
4.file =
5 >
6.file =
10.text.case = normal
10.fontSize = 12
10.offset = 1,16
}
RO < .NO
RO {
10.fontColor = #DC551B
}
IFSUB < .NO
IFSUB.wrap >
IFSUB.allStdWrap.dataWrap = <li>|<ul class="third_level" style="left:{TSFE:lastImageInfo|0}px;"> ### da haben wir wieder das Problem mit der Breite...
ACTIFSUB < .IFSUB
CURIFSUB < .IFSUB
IFSUBRO < .IFSUB
IFSUBRO.10.fontColor = #DC551B
ACTIFSUBRO < .IFSUBRO
CURIFSUBRO < .IFSUBRO
}
3 < .2
3 {
wrap >
wrap = |</ul></li>
}
}
Danke,
Bruder Chang