«
»

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):

  1. 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.

  1. temp.navi = HMENU
  2. temp.navi.entryLevel = 1
  3. temp.navi.1 = GMENU_LAYERS
  4. temp.navi.1 {
  5.   layerStyle = position: absolute; visibility: hidden; width: 100%; top: 10px;
  6.   lockPosition = x
  7.   setFixedWidth = 0
  8.   relativeToTriggerItem = 0
  9.   freezeMouseover = 0
  10.   expAll = 1
  11.   displayActiveOnLoad = 1
  12.   dontHideOnMouseUp = 1
  13.   NO {
  14.     ATagParams = style="height: 32px; width: 260px; display: block;"
  15.     XY = 260,28
  16.     backColor = #ffffff
  17.     transparentBackground = 1
  18.     10 = TEXT
  19.     10.text.field = title
  20.     10.fontFile = fileadmin/templates/DINEngschrift.otf
  21.     10.fontColor = #116aae
  22.     10.fontSize = 20
  23.     10.offset = 0,22
  24.     # 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
  25.   }
  26.   RO < .NO
  27.   RO {
  28.     10.fontSize = 24
  29.     10.offset = 0,22
  30.     20 = IMAGE
  31.     20.file = fileadmin/images/menu_pfeil.gif
  32.     20.offset = 251,5
  33.   }
  34.   RO = 1
  35.   ACT < .RO
  36.   ACT {
  37.     10.fontColor = #f7b221
  38.     20 >
  39.   }
  40.   ACT = 1
  41. }
  42. temp.navi.2 = GMENU
  43. temp.navi.2 {
  44.   wrap = <div style="position: relative; width: 900px; margin: 0 auto;"><div style="position: absolute; left: 600px; top: 0; width: 250px; height: 220px; padding: 10px; background-image: url(fileadmin/images/menu_layer_bg.gif); background-repeat: no-repeat; text-align: left;">|</div></div> 
  45.   NO {
  46.     ATagParams = style="display: block; height: 32px;"
  47.     XY = 200,28
  48.     backColor = #ffffff
  49.     transparentBackground = 1
  50.     10 = TEXT
  51.     10.text.field = title
  52.     10.fontFile = fileadmin/templates/DINEngschrift.otf
  53.     10.fontColor = #116aae
  54.     10.fontSize = 20
  55.     10.offset = 0,22
  56.     # 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
  57.   }
  58.   RO < .NO
  59.   RO {
  60.     10.fontSize = 24
  61.     10.offset = 0,22
  62.   }
  63.   RO = 1
  64.   ACT < .RO
  65.   ACT {
  66.     10.fontColor = #f7b221
  67.   }
  68.   ACT = 1
  69. }

Der Beitrag wurde am Freitag, den 21. September 2007 um 16:04 Uhr veröffentlicht und wurde unter typo3 abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

2 Antworten zu “GMENU_LAYERS”

  1. nukem empire sagt:
    06. Oktober 2007 um 07:18

    also …

    ich wollt dir ja erst keine mail schreiben, aber …

    … wenn man permanent haarscharf drann is und dann findet man seinen meister, dann …
    dein script is (zumindest für mich) der hammer.
    könnt dich den ganzen tag lang umarmen.
    hat mir definitiv auf die sprünge geholfen.

    ps: war jetz nich für meine site, die is ja recht unkompliziert, aber hab da so nen kunden, der will was “besonderes”.

    danke
    mit gruß
    nukem

  2. pow sagt:
    15. Juli 2009 um 10:44

    Die kopierfunktion klappt nicht so ganz im Firefox, da kopiert es die Zeilenummern mit. Bißchen doof gelöst :-/

Hinterlasse eine Antwort