Zum Inhalt springen

Back Probleme mit GMENU LAYERS

Erstellt am 7. Juli 2005 · 16 Antworten · letzte Antwort am 11. Juli 2005

Tags: Frage

Imagine ·

Hi,

das mit den Menüs klappt soweit, dass sie nicht dem Mauszeiger folgen. Ich habe jetzt aber ein anderes Problem. Ich komme mit den Positionierungen nicht klar.
Ich habe meine vertikale Menüleiste am linken Browserrand relativ in der Mitte von oben. Dazu mein Template:

marks.MENUE = HMENU
marks.MENUE.1 = GMENU_LAYERS
marks.MENUE.1 {
layerStyle =
position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
leftOffset = 150
topOffset = 100
lockPosition = y
dontFollowMouse = 1
expAll=1
NO {
backColor = #071478
XY = 150, 20
allWrap = |<br />
10 = TEXT
10.text.field = title
10.fontFace = fileadmin/SUSESansMono-Roman.ttf
10.fontSize = 11
10.fontColor = #ffffff
10.offset = 5,15
}
}

marks.MENUE.2 = GMENU_LAYERS
marks.MENUE.2 {
layerStyle =
position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
leftOffset = -10
topOffset = 100
lockPosition = y
dontFollowMouse = 1
expAll = 1
}
marks.MENUE.2.NO {
backColor = |*| #071478 || #a7add7 |*|
XY = 140, 20
10 = TEXT
10.text.field = title
10.offset = 5,13
10.fontSize = 11
10.fontFace = fileadmin/SUSESansMono-Roman.ttf
10.fontColor = #ffffff

20 = BOX
20.dimensions = 0,0,2,20
20.color = #ffffff

30 < .20
30.align = r

40 = BOX ||
40.dimensions = 0,0,140,2
40.color = #000000

50 = |*||*| || BOX
50.dimensions = 0,0,140,2
50.color = #ffffff
50.align = ,b
}

marks.MENUE.3 = GMENU
leftOffset = 300
topOffset = -100
marks.MENUE.3.NO {
backColor = |*| #071478 || #a7add7 |*|
XY = 120, 20
10 = TEXT
10.text.field = title
10.fontFace = fileadmin/SUSESansMono-Roman.ttf
10.fontSize = 10
10.fontColor = #ffffff
10.offset = 5,13

20 = BOX
20.dimensions = 0,0,2,20
20.color = #000000

30 < .20
30.align = r

40 = BOX ||
40.dimensions = 0,0,120,2
40.color = #000000

50 = |*||*| || BOX
50.dimensions = 0,0,120,2
50.color = #000000
50.align = ,b
}

Jetzt klappen die Menüs der ersten Ebene nach rechts auf und hängen sich am oberen Browserrand auf. Zweite Menü, das ein Untermenü hat, starte etwa 20 px unterhalb des Browserrands. Und die Untermenüs der dritten Ebene hängen sich ebenfalls am oberen Broswerrand und vor allem ganz links auf.

Wie bekomme ich es hin, dass die Aufklappmenüs immer rechts vom Elternmenü und mindestens auf der Höhe des angeklickten Menüpunktes im Broswerfenster erscheinen?

Kann mir jemand in meiner Verzweiflung helfen?

Grüße

Imagine

Moeffz ·

Schau Dir mal diese beiden Dinger in der TSRef an:

      # Positioniert das Menü relativ zum Bezugpunkt (aktiv:=1)
      relativeToParentLayer=1
      relativeToTriggerItem=1

Ich weiß auch nicht, warum Du nicht den Standardwert für "position" beläßt.

In der TSRef waren auch ein paar Anmerkungen zum Internet Explorer -> unbedingt lesen. Schau Dir Deine Zwischenergebnisse daher auch mit einem anderen Browser an, bevor Du wegen des Ergebnisses frustriert zusammenbrichst.

Imagine ·

Hi,

also Dein Tip hat insoweit etwas gebracht, als die Untermenues aus Ebene3 sich wie gewünscht neben dem auslösenden Menuepunkt setzen.

Allerdings was ich noch nicht hinbekommen habe, ist dass alle Untermenue ab Ebene2 vertikal ca. 500px nach unten und 20px nach rechts verschoben werden. Das Hauptmenue sitzt nämlich nicht oben links bei 0,0 sondern eher bei 0,500.

Ich weiß auch nicht, warum Du nicht den Standardwert für "position" beläßt.

Und was meinst Du mit Standardwert für "position"? Wie sollte der ansonsten heißen?

Grüsse
Imagine

Moeffz ·

Ich meinte nicht position, sondern natürlich den layerStyle. Der ist mit "position: absolute; visiblity: hidden;" vorbelegt. Wenn Du den also auskommentierst, hat er eben jenen Wert. Ist das bei Dir eigentlich tatsächlich auf zwei Zeilen verteilt? Dann kommentier beide aus😉

Die offsets sind auch etwas riesig. Hast Du Dir Dein Menü nach den Änderungen schon in einem anderen Browser angesehen?

Hier im Forum wurde auch mal ein komplettes GMENU_LAYERS gepostet. Da kannst Du nochmal schauen. Ich habe auch noch eines, wenn Interesse besteht. Leider kann ich das nicht vorführen, da die Dinger mit Typo3 3.8.0 nicht funktionieren, aber das TS stelle ich gerne zur Verfügung.

Imagine ·

Ach so,

ich füge mal noch hinzu. Ich habe das Menue in einem Marker einer Designvorlage sitzen, in der oberhalb dieses Tabelleninhaltes noch zwei Tabellenreihen sitzen mit Firmenlogo.

Imagine ·

Wenn ich das

Wenn Du den also auskommentierst, hat er eben jenen Wert. Ist das bei Dir eigentlich tatsächlich auf zwei Zeilen verteilt?

mache verhaut's mir die Seite.

Kommentiere ich sie aus, dann habe ich die Untermenue's als Zeile und das will ja nicht.

Die Offsets habe ich so gesetzt, weil die Untermenues runter haben wollte, aber die Änderung der Werte bewirkt rein gar nichts.
Und IE zeigt das Ganze genauso an wie Firefox, den ich bevorzuge.

Moeffz ·

Nur zum Verständnis:
Es geht doch erstmal um die Positionierung der ersten Ebene, oder? Und das ist diese hier:

marks.MENUE.1

Welchen Effekt hatte das Auskommentieren der beiden Zeilen mit dem layerStyle auf die Positionierung?

Danach kannst Du immer noch einen Zeilenumbruch in Deine zweite Ebene wrappen, damit die untereinander angezeigt werden.

Ich kann Deinen Fehler übrigens nicht nachvollziehen:
http://p9728.typo3server.info/wir_ueber_uns.3.html

Besser nicht mit dem IE ansehen. Der meldet irgendwelche Fehler, aber das liegt wohl am Typo3 3.8.0. Da ist das xMENU_LAYERS verbuggt.

Opera 7.54 setzt das Menü komplett nebeneinander und ignoriert die maximal zugelassene Breite. Firefox 1.0.4 macht automatisch an entsprechender Stelle einen Zeilenumbruch. Doch die Positionierung des Menüs ist in jedem Fall korrekt.

Imagine ·

Hallo und einen guten Morgen,

zu Deiner Frage: Nein, das Hauptmenue ist dieses hier

marks.MENUE = HMENU
marks.MENUE.1 = GMENU_LAYERS

und das ist festverankert durch eine Tabellenzeile links in der vertikalen Mitte des Browsers, in der Marker ###MENUE### steht.
In der Tabellenzeile meiner Desingvorlage darüber steckt ein das Corporate Identy (Logo) als Bilddatei komplett in einer Tabellenzeile. Wenn ich jetzt folgendes mache:

marks.MENUE.1 {
  #layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden; 
   leftOffset = 180

dann verzieht es die Tabellenzeile mit dem Logo um ein Drittel nach unten.
Zurück zu dem Menue, das an der falschen Stelle beginnt. Ich gebe zu, die Position 0,0 war irreführend - korrekt ist 0,138.
Die horziontale Positionierung stimmt inzwischen.
Nur das Menue 2 und damit alle Anderen

marks.MENUE.2 = GMENU_LAYERS
marks.MENUE.2 {
   layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
   leftOffset = 138
 #  topOffset = 500
   lockPosition = y
   dontFollowMouse = 1
   relativeToParentLayer = 1
   #relativeToTriggerItem=1
   expAll = 1
}

beginnt bei der y-Koordinate 0 und Dank

leftOffset = 138

an der richtigen x-Koordinate.

Mein Problem ist jetzt, wie kann ich die y-Koordinate von MENUE.2 so verändern, dass sie unten z.B. bei y=200 beginnt? Und nicht wie bisher ganz oben am Browserrand.

So, wenn ich jetzt das hier mache:

marks.MENUE.2 = GMENU_LAYERS
marks.MENUE.2 {
   #layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
   leftOffset = 138

dann wird das MENUE.2 als horizontale Reihe abgebildet anstatt eine vertikale Box.

Opera 7.54 setzt das Menü komplett nebeneinander und ignoriert die maximal zugelassene Breite.

Das habe ich gemerkt und mit dem Firefox habe ich keine Probleme, genauso wie der IE, den ich auf meiner Linux-Maschine für solche Zwecke drauf habe.

Moeffz ·

Bei mir sah das ungefähr so aus (erste Ebene waagerecht, zweite Ebene senkrecht unter dem zugehörigen Menüpunkt der ersten, dritte Ebene neben der zweiten):

temp.gHauptmenue = HMENU
temp.gHauptmenue {
   entryLevel = 0
   1 = GMENU_LAYERS
   1{
      useLargestItemY=1
      topOffset=15
      leftOffset=35
      relativeToParentLayer=1
      relativeToTriggerItem=1
      lockPosition = x
      expAll=1
      wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
      hideMenuWhenNotOver=1
      freezeMouseover = 1
      NO{
         [...]
      }
   }
   2 = GMENU_LAYERS
   2{
      lockPosition = x
      relativeToParentLayer=1 
      relativeToTriggerItem=1
      relativeToTriggerItem.addWidth = 1
      hideMenuWhenNotOver=1 
      freezeMouseover = 1
      topOffset = 5 
      leftOffset = 5 
      wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
      useLargestItemX = 1
      expAll=1
      hideMenuWhenNotOver=1
      NO{
         [...]
      }
   }
   3 = GMENU_LAYERS
   3{
      topOffset = -5
      leftOffset = 5
      lockPosition = x
      expAll=1
      relativeToParentLayer=1
      relativeToTriggerItem=1
      relativeToTriggerItem.addWidth = 1
      hideMenuWhenNotOver=1
      freezeMouseover = 1
      wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
      useLargestItemX = 1
      NO{
         [...]
      }
   }
}

Ich habe damals sehr lange mit den relativeToTriggerItem und relativeToParentLayer-Geschichten rumprobiert, bis es funktioniert hat.

Hast Du auf der obersten Ebene auch die relative-Dinger reingesetzt?
Den topOffset hast Du aber nicht mehr auskommentiert, oder?

Wäre hilfreich gewesen, wenn Du die geänderten Menürümpfe auch gepostet hättest (ohne die Boxen).

Imagine ·

Hier nocheinmal die Änderungen.

marks.MENUE = HMENU
marks.MENUE.1 = GMENU_LAYERS
marks.MENUE.1 {
   layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden; 
   leftOffset = 180
   lockPosition = y
   #relativeToParentLayer = 1
   relativeToTriggerItem = 1
   dontFollowMouse = 1
   expAll=1
   NO {
      backColor = #071478
      XY = 150, 20
      allWrap = |<br />

...

marks.MENUE.2 = GMENU_LAYERS
marks.MENUE.2 {
   layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
   leftOffset = 138
   lockPosition = y
   dontFollowMouse = 1
   relativeToParentLayer = 1
  # relativeToTriggerItem = 1
   expAll = 1
}
marks.MENUE.2.NO { 
   backColor = #071478

...

marks.MENUE.3 = GMENU_LAYERS
   leftOffset = 276
   lockPosition = y
   dontFollowMouse = 1
   relativeToParentLayer = 1
   expAll = 1
marks.MENUE.3.NO {
   backColor = #071478

....

marks.MENUE.4 = GMENU
   leftOffset = 414
marks.MENUE.4.NO {
   backColor = #071478

Wenn ich unter MENUE.1 relativeToTriggerItem = 1 setze, egal ob relativeToParentLayer = 1 gesetzt ist oder nicht, dann rutscht MENUE.2 auf die Höhe von MENUE.1 runter. Das ist ja auch so gewünscht. Nur von MENUE.1 sehe von ingesamt 8 Menuepunkten nur den Ersten, sonst nichts. Arbeite ich unter MENUE.1 nur mit relativeToParentLayer = 1, sitzt MENUE.2 ganz oben, aber von MENUE.1 sind alle Punkte da (immerhin 160px Höhe).
Und unter den anderen MENUE.2, MENUE.3, MENUE.4 hat relativeToTriggerItem = 1 keine Auswirkungen. Ferner zeigen die topOffset keine Änderungen, ergo lasse ich sie weg. Wichtig sind eher die leftOffset, denn die legen den linken X-Wert für das nächste Menue fest - das ist ja auc nicht mehr das Problem.

Wenn ich jetzt relativeToTriggerItem = 1 bei MENUE.1 benötige, wäre nur die Frage, wie ich es hinbekomme, dass alle Punkte angezeigt werden? Oder es gibt eine andere Lösung, um die Ebene 2 runterzuverschieben.

Dem füge ich hinzu, dass im IE zwar bei MENUE.1 alle acht Menues angezeigt werden, allerdings zerfetzt durch einen Einschub von 20px hohen Leerzeilen zwischen den einzelnen Punkten. Während bei Firefox obiges Problem besteht.

Moeffz ·

Das schaut ja so aus, als wenn der relativeToTriggerItem im Bezug auf die Positionierung den gewünschten Effekt hat. Muss nur noch das Layout korrigiert werden.

Ich erinner mich an die zerfetzten Menüs. Das habe ich nur dadurch in den Griff bekommen, dass ich jede Menüebene in eine Tabelle gewrappt habe. Bei einer Menüebene, in der die Elemente untereinander liegen, schaut das beispielsweise so aus:

wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>

an der Stelle, an der man das oben bereits sieht.
Und später dann:

      NO{
         allWrap = <tr><td>|</td></tr>
         [...]
         }

Wenn die Elemente nebeneinander liegen sollen, dann muss das <tr> vom allWrap in den wrap verschoben werden.

Imagine ·

Hallo,

gestern Abend bei einem Glas Wein ist mir ein ähnlicher Gedanke durch den Kopf gegangen:

1.
NO{
2.
allWrap = <tr><td>|</td></tr>
3.
[...]
4.
}

Nämlich den Zeilenbruch in dem wrap-Befehl ebenso wie Du in eine Tabellenzeile umzuwandeln, denn das Ganze steckt ja in einer Tabelle in der Designvorlage.

Da warst Du allerdings schneller. So wie Du es angegeben hast klappt das jetzt ganz gut. Eben wie gewünscht. Dafür möchte ich mich natürlich auch bedanken.

Das Einzige was mir jetzt noch Kopfschmerzen macht ist MENUE.4, das nicht mehr angezeigt wird. Das letzte Layer, das angezeigt wird, ist MENUE.3

marks.MENUE.3 = GMENU_LAYERS
   layerStyle = position:absolute;left:0px;top:0px;width:10px;VISIBILITY:hidden;
   leftOffset = 276
   lockPosition = y
   dontFollowMouse = 1
   relativeToParentLayer = 1
   expAll = 1
marks.MENUE.3.NO {
   backColor = #071478
   XY = 140, 20
   10 = TEXT
   10.text.field = title
   10.fontFace = fileadmin/SUSESansMono-Roman.ttf
   10.fontSize = 10
   10.fontColor =#f5f5f5
   10.offset = 5,13
 
[...]
}
marks.MENUE.4 = GMENU
marks.MENUE.4.NO {
   backColor = #071478
   10 = TEXT
   10.text.field = title
   10.fontFace = fileadmin/SUSESansMono-Roman.ttf
   10.fontSize = 10
   10.fontColor = #f5f5f5
   10.offset = 5,13
 
[...]
}

Also rechts von dem zweiten Untermenue müsste noch ein drittes Menue erscheinen, tut es aber nicht.
Hängt das vielleicht mit einer vorher eingestellten Gesamtbreite für die darstellbaren Layers zusammnen?

Imagine ·

Ich glaube, dem Fehler bin ich auf der Spur:

a) habe ich die Einträge XY = 140, 20 bei MENUE.4 vergessen
b) probiere ich jetzt genau das Obige darauf anzuwenden

Moeffz ·

Im Zweifel kannst Du einfach den Layer davor kopieren und anpassen (aus der 3 eine 4 etc.).

Entschuldige, dass ich auf den wrappen in einer Tabelle nicht vorher hingewiesen habe. Liegt wohl daran, dass dieser Tipp bisher (von anderen) geflissentlich ignoriert wurde. Irgendwann gibt man auf. Steht übrigens in der TSRef.

Übrigens kannst Du die Breite variabel gestalten:

marks.MENU.1{
useLargestItemX = 1
[...]
marks.MENU.1.NO{
XY = [10.w]+[20.w]+15, [10.h]+8
[...]

Nur, falls Du es gebrauchen kannst. Angepasst werden muss es natürlich schon.

BTW: Das Menü muss in der Vorlage nicht zwingend in einer Tabelle stehen. Die von mir beschriebene Variante funktioniert auch in einem CSS-Layout. Dazu muss nicht nur jeder Menüeintrag in eine Tabellenzelle, sondern zusätzlich jede Menüebene in eine Tabelle gewrappt werden. Bei einem waagerechten Menü ist das gesamte Menü dann in einer Zeile, bei einem senkrechten (wie bei Dir) ist jeder Menüeintrag in einer Zeile.

Imagine ·

Hallo und vielen Dank

für den zusätzlichen Tip. Sicher gebrauchen kannst du solche Informationen immer, auch ich. Wenn ich mein letztes Problem eben dahin gelöst habe, dass ich einfach einmal den Code sauber geschrieben hatte. Dabei ist mir nämlich ein eigener Schreibfehler aufgefallen.

Jetzt funktioniert das gesammte Menue bis runter zur letzten Ebene, sowohl auf dem Firefox als auch auf IE, nur Opera zeigt die Layers wo anders an. Aber ich denke, die meisten sind eh IE-fixiert, so dass mich deswegen jetzt nicht unbedingt verrückt machen lasse.