GMENU_LAYERS / TMENU_LAYERS

GMENU_LAYERS / TMENU_LAYERS ist eine Erweiterung von »GMENU/»TMENU,was bedeutet, dass die untenstehenden Eigenschaften zusätzliche zudenen von GMENU/TMENU sind.

Der Zweck von xMENU_LAYERS ist es, Menüs mit 2 (oder mehr) Ebenen zuerzeugen, bei denen die zweite (,dritte...) Ebene in einem DHTML-Layerangezeigt wird.

Die meisten Features funktionieren mit allen gängigen Browsern wieNetscape, Microsoft Internet Explorer, Mozilla, Konqueror und Opera.Sie können die Menüs verschachteln wie Sie wollen.

ANMERKUNG: Sie müssen die Bibliothek media/scripts/gmenu_layers.php (für GMENU_LAYERS) und/oder media/scripts/tmenu_layers.php (für TMENU_LAYERS) einbinden, sowie die xMENU_LAYERS auf die nächste Ebene ausklappen, damit das Menü Sinn macht (mit der .expAll-Eigenschaft).

KOMPABILITÄT: MSIE 4+, Netscape 4+ und 6+, Opera 5+, Konqueror

ANMERKUNGEN:

  • Netscape 4 unterstützt für die Layers keine MouseOver-Ereignisse
  • Opera scheint mit dem MouseOut-Ereignis Probleme zu haben, wenn Sie die Maus von einem Element auf ein Layer bewegen. Dann könnte es sein, dass das Ereignis nicht ausgelöst wird, bevor das Layer betreten wird. Das passiert jedoch nur, wenn das Layer sehr dicht am Auslöserelement platziert ist. Ein daraus folgendes Problem könnte zum Beispiel sein, dass der Rollover-Status der Elemente nicht zurückgesetzt wird.
  • Möglicher Bug: Bei verschachtelten Layermenüs wurde bei Opera beobachtet, dass sämtliche Interaktion mit der Seite verweigert wurde, sogar das Anwählen normaler Links. Mit einem einfachen Layermenü mit nur einer Ebene scheint dieses Problem nicht aufzutreten.

Eigenschaft

Datentyp

Beschreibung

Standard

layerStyle

<DIV>-Tag Parameter

Parameter für die <DIV>-Layer-Tags im HTML-Dokument. Sie werden diese Eigenschaft wahrscheinlich nicht ändern müssen.

Beispiel:
position: absolute; visibility: hidden;

position: absolute; visiblity: hidden;

lockPosition

"x" / "y" / ""

Wenn diese Eigenschaft auf x oder y gesetzt ist, wird das Menü fixiert, sodass es dem Mauscursor nicht folgt (was es normalerweise tut). x oder ygibt jeweils an, dass die summierte Breite (x) bzw. Höhe (y) der x-oder y-Position des Menüs hinzugefügt wird. Das heißt, Sie sollten diesen Wert auf x setzen, wenn Sie ein horizontales xMENU_LAYERS haben wollen, und wenn Sie einvertikales xMENU_LAYERS haben wollen, sollten Sie ihn auf y setzen.

dontFollowMouse

boolean

Wenn diese Eigenschaft gesetzt ist, und wenn ».lockPosition keinen Wert hat (sodass das Layermenü also der Maus folgt), wird das Menü nicht mehr der Maus folgen, aber dennoch an der Stelle erscheinen,an der der Cursor das Auslöserelement berührt hat. Nützlich, wenn Sie nicht die exakte Position der Elemente kennen.

WARNUNG: Sie sollten für Menüs, bei denen diese Eigenschaft aktiviert ist, nicht die Eigenschaft ».displayActiveOnLoad setzen (da die absolute Position des Layers nicht bekannt ist).

lockPosition_adjust

int

Eine Zahl, die auf die Höhe/Breite der Menüelemente addiert wird, um z.B. hspace oder andere Dinge zwischen den Bildern im GMENU_LAYERS zu kompensieren.

lockPosition_addSelf

boolean

Normalerweise werden Breite und Höhe der Elemente (+ »lockPosition_adjust) nach den Rendern des Elements zusammengerechnet. Das ist gut, wenn das Menü nach unten oder nach rechts ausklappt.
Solldas Menü jedoch nach links oder nach oben ausklappen, werden Sie vielleicht die Breite der Elemente vorher addieren wollen. Wenn ja, setzen Sie diese Eigenschaft.

xPosOffset

int

Der Abstand des Menüs von dem Punkt, an dem es aktiviert wurde (wenn ».lockPosition falsch ist) / von der oberen linken Ecke der Seite (wenn .lockPosition wahr ist).

yPosOffset

int

Wie oben, nur für die y-Koordinate.

topOffset

int

Der Abstand der Menüelemente vom oberen Rand des Browsers. Sollte lieber hier gesetzt werden als in der ».layerStyle-Eigenschaft. Muss gesetzt werden, um »directionUp zu benutzen.
Wird benutzt, wenn entweder lockPosition=x oder xPosOffset angegeben ist.

leftOffset

int

Der Abstand der Menüelemente vom linken Rand des Browsers. Sollte lieber hier gesetzt werden als in der ».layerStyle-Eigenschaft. Muss gesetzt werden, um »directionLeft zu benutzen.
Wird benutzt, wenn entweder lockPosition=y oder yPosOffset angegeben ist.

blankStrEqFalse

boolean

Wenngesetzt, werden die Eigenschaften »topOffset, »leftOffset, »xPosOffset und »yPosOffset nur dann als "leer" angesehen, wenn sie wirklich leer sind (und nicht nur 0). Sie sollten diese Eigenschaft aktivieren, wenn Sie mit null-Abständen arbeiten können wollen. Das ist in der Regel der Fall, wenn Sie relative Positionierung verwenden.

directionLeft

boolean

Setzen Sie diese Eigenschaft, wenn die Menüelemente nach rechts ausgerichtet sein sollen (wenn das Menü also zur linken Seite ausklappt).
Funktioniert noch nicht mit Opera, weil ich (Kasper Skårhøj) nicht weiß, wie mit Opera die Breite jedes Layers ausgelesen werden kann.
Aber wenn Sie die Breite des Layers in ».layerStyles setzen, wird es trotzdem auf jeden Fall funktionieren.

directionUp

boolean

Setzen Sie diese Eigenschaft, wenn die Menüelemente nach unten ausgerichtet sein sollen (das Menü als nach oben ausklappen soll).

setFixedWidth

int

Bei einem GMENU_LAYERS ist die Breite und Höhe der Elemente in der Regel durch die Ausmaße des Bildes bekannt. Bei TMENU_LAYERS kann das nicht auf diese Art bestimmt werden. Daher können Sie .setFixedWidth und.setFixedHeight verwenden, um diese Werte auf eine angemessene Zahl zusetzen. Das kann natürlich immer noch vom Browser vereitelt werden,wenn die Schrift zu groß wird usw.

Alternativ werden Sie vielleicht auch die Eigenschaft »relativeToTriggerItem benutzen wollen,die Ihr Menü-Layer relativ zum auslösenden Element platziert. Das hat manchmal allerdings Nachteile. Der Mittelweg wäre, ein Menü zuverwenden, in dem ».lockPosition leer und ».dontFollowMouse wahr ist.Dann müssen Sie nur eine X- oder Y-Koordinate zum Folgen angeben und das Element erscheint dort, wo die Maus auf den Auslöser trifft.

ANMERKUNG: Diese Eigenschaft ist aktiv, wenn sie NICHT leer ist. Wenn dieser Wert auf 0 gesetzt wird, heißt das, dass die Menüelemente keine Breite haben.

bordersWithin

l,t,r,b,l,t

Beschränkt die Maße des Layers auf diese Werte in Pixeln. 0 heißt "nicht gesetzt".

Syntax: Integerliste, im Uhrzeigersinn ausgewertet: Links, Oben, Rechts, Unten, Links, Oben.

displayActiveOnLoad

boolean

Wenn gesetzt, wird das Untermenü-Layer des aktiven Menüelements beim Laden der Seite geöffnet. Wenn ».freezeMouseover ebenfalls gesetzt ist, und für die Hauptmenüelemente RO angegeben ist, wird das Menüelement, welches zu dem angezeigten Untermenü gehört, ebenfalls angezeigt.

Eigenschaften:
.onlyOnLoad (boolean)
Wenn gesetzt, wird das aktive Element nur beim Laden angezeigt. Die Ansicht wird nicht beim Mausaustritt aus anderen Elementen wiederhergestellt.

WARNUNG: Wenn Sie xMENU_LAYER-Elemente verschachteln, achten Sie darauf, dass alle übergeordneten Menüs diese Eigenschaft ebenfalls gesetzt haben.

freezeMouseover

boolean

Wenn gesetzt, wird ein MouseOut-Effekt eines Hauptmenüelements nicht beim Mausaustritt entfernt, sondern beim Mauseintritt in ein anderes Element.

Eigenschaften:
.alwaysKeep (boolean)
Wenn gesetzt, bleibt das gefreezte Element immer da, auch wenn das Untermenü wieder versteckt ist.

hideMenuWhen
NotOver

int+

Wenn gesetzt (>1) wird das Menü sich selbst verstecken, wenn der Cursor vom Menü wegbewegt wird. Der Wert dieses Parameters gibt an, wie weit sich der Cursor vom Menü entfernt, bis es unsichtbar wird.

hideMenuTimer

int+

Dies gibt an (in Millisekunden), wie lange das Menü wartet, bis es unsichtbar wird, wenn ».hideMenuWhenNotOver gesetzt ist.

dontHideOn
MouseUp

boolean

Wenn gesetzt, werden die Menü-Layers nicht versteckt, wenn die Maus geklickt wird. Nützlich, wenn die Menüelemente die Seiten in einen anderen Frame laden.

layer_menu_id

string

Verwenden Sie diese Eigenschaft, wenn Sie einem Menü auf dieser Seite einen bestimmten Namen geben wollen. Werden Sie wahrscheinlich nicht brauchen.

ACHTUNG: Verwenden Sie keine Unterstriche und Sonderzeichen, sondern nur alphanumerische Zeichen.

Zufälliger 6-Zeichen-
Hashstring

relativeTo
TriggerItem

boolean

Diese Eigenschaft erlaubt es Ihnen, die Menü-Layers relativ zum auslösenden Element zu platzieren. Sie sollten sich jedoch der folgenden Dingebewusst sein:

  • Dies funktioniert nicht mit Netscape 4 - Als Position des Auslösers wird 0 errechnet werden und daher ist die Position all Ihrer Menüs 0/0.
  • Dieses Feature wrapt das Menü in einige <div>-Tags genau bevor dasgesamte Menü durch den .wrap-Code (für GMENU_LAYERS), bzw. den .allWrap-Code (für TMENU_LAYERS) gewrapt wird.
    Unterm Strich:
    1. Wenn Ihr Menü horizontal ist, formatieren Sie Ihre Menüelemente immer in einer Tabelle, damit wegen der <div>-Tags keine Zeilenumbrüche dargestellt werden.
    2. Vergewissern Sie sich, dass das jeweilige Wrappen der Tabellenzellen mit den .wrap/.allWrap-Eigenschaften gemacht wird.
  • Funktioniert nur effektiv mit dem ersten xMENU_LAYER einer Verschachtelung. Für weitere xMENU_LAYERS verwenden Sie bitte ».relativeToParentLayer.

Wenn gesetzt, funktionieren die Eigenschaften ».xPosOffset, ».yPosOffset und ».lockPosition nicht (die Eigenschaften ».directionLeft, ».directionUp, ».topOffset und ».leftOffset sind immer noch aktiv).

Zusätzliche Eigenschaften:
.addWidth = Fügt die Breite des Auslöserelementes hinzu.
.addHeight = Fügt die Höhe des Auslöserelementes hinzu.

relativeTo
ParentLayer

boolean

Wenn gesetzt, wird das Layer relativ zum vorhergehenden, übergeordneten Layer in einer verschachtelten Reihe von xMENU_LAYER positioniert. Im Grunde wird der relativen Position des übergeordneten Menüs nur der Abstand des derzeitigen Menüs hinzugefügt.

ACHTUNG: Diese Eigenschaft macht nur Sinn, wenn Sie wirklich ein übergeordnetes xMENU_LAYER haben.

Zusätzliche Eigenschaften:
.addWidth = Fügt die Breite des übergeordneten Layers hinzu
.addHeight = Fügt die Höhe des übergeordneten Layres hinzu.


Kommentare von registrierten Benutzern:

Kommentar von: BastianBalthasarBux

23. 08. 2008, 20:13
Um ein Problem das sehr häufig auftritt ein für alle mal zu klären:

Niemals niemals niemals darf auch nur ein Elternelement oder Kindelement der layernavigation in irgendeiner Weise mittels CSS positioniert werden, weder absolut noch relativ.

Bei Elternelement tritt folgendes Problem auf: Die Positionierung des aufgeklappten Layers würfelts total.

Bei Kindelementen wird dann ein Problem mit hideMenuWhenNotOver auftreten (menü klappt zu schnell zu um zu klicken), speziell am IE inklusive Version 7!!

Profil

Kommentar von: FÜHRER

14. 04. 2008, 17:09
Hallo Leute,

nachdem ich lange herum gedoktort habe, möchte ich euch noch die Umsetzung meines GMENU_LAYERS-Menüs präsentieren. Es handelt sich um ein Vertikal-Menü, welches horizontal aufklappt:

Typoscript:Zeilennummerierung:  An / Aus

  1. # >MARK: NAVIGATION< #
  2. page.includeLibs.gmenu_layers = typo3/sysext/cms/tslib/media/scripts/gmenu_layers.php
  3.  
  4. temp.NAVIGATION = HMENU
  5. temp.NAVIGATION.1 = GMENU_LAYERS
  6. temp.NAVIGATION.1 {
  7.  
  8. // Die 1. Ebene ist fest plaziert. Die folgenden Ebenen orientieren sich an dieser!
  9.  
  10.    layerStyle = position: absolute; left: 50%; margin-left: -315px; width: 172px; visibility: hidden
  11.    xPosOffset = 0
  12.    yPosOffset = -180
  13.    lockPosition = y
  14.    expAll = 1
  15.  
  16.    NO {
  17.       XY = 172, 28
  18.       5 = IMAGE
  19.       5.file {
  20.          import = uploads/media/     
  21.          import.listNum = 0
  22.          import.override.field = media
  23.          }
  24.       10 = TEXT
  25.       10.text.field = title
  26.       10.offset = 10,17
  27.       10.fontSize = 12
  28.       10.fontFace = fileadmin/templates/fonts/ucr.ttf
  29.       10.fontColor = #FFFFFF
  30.       10.niceText = 1
  31.    }
  32.  
  33.    RO < .NO
  34.    RO = 1
  35.    RO {
  36.       10.fontColor = #000000
  37.    }
  38.  
  39.    ACT < .NO
  40.    ACT = 1
  41.    ACT {
  42.       10.fontColor = #000000
  43.    }
  44. }
  45.  
  46. temp.NAVIGATION.2 = GMENU_LAYERS
  47. temp.NAVIGATION.2 {
  48.    layerStyle = position: absolute; width: 172px; visibility: hidden
  49.    relativeToTriggerItem = 1
  50.    relativeToParentLayer = 1
  51.    relativeToTriggerItem.addWidth = 1
  52.    expAll = 1
  53.  
  54.    NO {
  55.       XY = 172, 20
  56.       5 = IMAGE
  57.       5.file {
  58.          import = uploads/media/     
  59.          import.listNum = 0
  60.          import.override.field = media
  61.          }
  62.       10 = TEXT
  63.       10.text.field = title
  64.       10.offset = 5,15
  65.       10.fontSize = 11
  66.       10.fontFace = fileadmin/templates/fonts/ucr.ttf
  67.       10.fontColor = #FFFFFF
  68.       10.niceText = 1
  69.    }
  70.  
  71.    RO < .NO
  72.    RO = 1
  73.    RO {
  74.       10.fontColor = #000000
  75.    }
  76.  
  77.    ACT < .NO
  78.    ACT = 1
  79.    ACT {
  80.       10.fontColor = #000000
  81.    }
  82. }
  83.  
  84. temp.NAVIGATION.3 < temp.NAVIGATION.2
  85. temp.NAVIGATION.4 < temp.NAVIGATION.2
  86. temp.NAVIGATION.5 < temp.NAVIGATION.2
  87.  
  88. page.10.marks.NAVIGATION < temp.NAVIGATION


Viele Grüße
THETREE

Profil

Kommentar von: Antoine

25. 01. 2008, 14:33
Hallo Zusammen,
suche genau diese Art von Klapp-Effekt,
aber leider nicht horizontal sondern
vertikal.
Was gibts da zu ändern?

Profil

Kommentar von: Stefan Krapf

20. 07. 2007, 15:35
ah ja, habs noch vergessen, das menü gibts auch live zu sehen unter http://www.theater-weggis.ch/index.php

Profil

Kommentar von: Stefan Krapf

20. 07. 2007, 15:33
hallo typo3-ler
hier hab ich euch ein menü mit mehr als 3 ebenen, dabei sind alle ebenen grafisch gelöst. ich habe hier nun mit "relativeToTriggerItem/relativeToParentLayer" gearbeitet, und ich muss sagen, dass ist eigentlich ziemlich praktisch so, vor allem mit zentriertem layout gehts glaub ich gar nicht anders:

zuerst natürlich das script includen (steht ja unten schon)

Typoscript:Zeilennummerierung:  An / Aus

  1. //// Grafisches Menü erstellen
  2.  
  3. //// Menü 1. Ebene
  4.  
  5. NAV_MAIN = HMENU
  6. NAV_MAIN {
  7.         special = directory
  8.         //// ID's angeben
  9.         special.value = 1
  10.        
  11.         1 = GMENU_LAYERS
  12.        
  13.         //// Layer-Einstellungen (gelten eigentlich erst für die nächste Ebene)
  14.                
  15.                 //// Positions-Einstellungen
  16.                 1.layerStyle = position:absolute;VISIBILITY:hidden;
  17.                 //// Position & Versatz relativ zum Eltern-Element (ab 2. Ebene brauchts zusätzlich "relativeToParentLayer")
  18.                 1.relativeToTriggerItem = 1
  19.                 1.relativeToTriggerItem.addHeight = 1
  20.                 1.topOffset = 1
  21.                 1.leftOffset = -7
  22.                
  23.                 //// Menü ausklappen (es wird sonst nichts angezeigt)
  24.                 1.expAll = 1
  25.                
  26.                 //// Menü ausblenden
  27.                
  28.                         //// Entfernung der Maus vom Menü (Pixel)
  29.                         1.hideMenuWhenNotOver = 20
  30.                         //// Zeit bis zur Ausblendung (Millisekunden)
  31.                         1.hideMenuTimer = 1000
  32.  
  33.        
  34.         //// table brauchts für Positionierung mittels "relativeToTriggerItem/relativeToParentLayer"
  35.         1.wrap=<table cellspacing="0" cellpadding="0"><tr>|</tr></table>
  36.  
  37.         1.NO = 1
  38.         1.NO {
  39.                 //// table brauchts für Positionierung mittels "relativeToTriggerItem/relativeToParentLayer"
  40.                 wrap=<td>|</td>
  41.                 XY = [40.w]+16, 24
  42.                 backColor = #d20237
  43.                
  44.                 //// Menütexte rendern
  45.                 40 = TEXT
  46.                 40.text.field = title
  47.                 40.fontFile = fileadmin/fonts/MyriadPro-SemiCn.ttf
  48.                 40.fontSize = 19
  49.                 40.fontColor = white
  50.                 40.niceText = 1
  51.                 40.offset = 2, 18
  52.         }
  53.        
  54.         //// Roll-Over definieren
  55.         1.RO < .1.NO
  56.         1.RO.40.fontColor = #ffcf11
  57.  
  58.         //// Aktiv-Status des übergeordneten Elements vorgeben
  59.         1.ACT < .1.RO
  60.         1.ACT.40.fontColor = #ffcf11
  61.        
  62.         //// Aktiv-Status vorgeben
  63.         1.CUR < .1.RO
  64.  
  65.  
  66. //// Menü 2. Ebene
  67.        
  68.         2 = GMENU_LAYERS
  69.        
  70.         //// Layer-Einstellungen (gelten eigentlich erst für die nächste Ebene)
  71.                
  72.                 //// Positions-Einstellungen
  73.                 2.layerStyle = position:absolute;VISIBILITY:hidden;
  74.                 //// Position & Versatz relativ zum Eltern-Element (ab 2. Ebene brauchts zusätzlich "relativeToParentLayer")
  75.                 2.relativeToTriggerItem = 1
  76.                 2.relativeToParentLayer = 1
  77.                 2.relativeToParentLayer.addWidth = 1
  78.                 2.topOffset = -1
  79.                 2.leftOffset = -2
  80.                
  81.                 //// Menü ausklappen (es wird sonst nichts angezeigt)
  82.                 2.expAll = 1
  83.                
  84.                 //// Menü ausblenden
  85.                
  86.                         //// Entfernung der Maus vom Menü (Pixel)
  87.                         2.hideMenuWhenNotOver = 20
  88.                         //// Zeit bis zur Ausblendung (Millisekunden)
  89.                         2.hideMenuTimer = 1000
  90.        
  91.         //// table brauchts für Positionierung mittels "relativeToTriggerItem/relativeToParentLayer"
  92.         //// div für weisse Linie rundherum
  93.         2.wrap=<div style="border: 1px solid #ffffff;"><table cellspacing="0" cellpadding="0">|</table></div>
  94.  
  95.         2.NO = 1
  96.         2.NO {
  97.                 //// table brauchts für Positionierung mittels "relativeToTriggerItem/relativeToParentLayer"
  98.                 wrap=<tr><td>|</td></tr>
  99.                 XY = 200, 25 |*| 200, 25 |*| 200, 24
  100.                 backColor = #d20237
  101.                
  102.                 //// Weisse Linie erzeugen
  103.                 30 = IMAGE
  104.                 30.file = GIFBUILDER
  105.                 30.file.XY = 200, 1
  106.                 30.file.backColor = white
  107.                 30.offset = 0, 24 |*| 0, 24 |*| -1, -1
  108.  
  109.                 //// Menütexte rendern
  110.                 40 = TEXT
  111.                 40.text.field = title
  112.                 40.fontFile = fileadmin/fonts/MyriadPro-SemiCn.ttf
  113.                 40.fontSize = 17
  114.                 40.fontColor = white
  115.                 40.niceText = 1
  116.                 40.offset = 10, 17
  117.         }
  118.        
  119.         //// Roll-Over definieren
  120.         2.RO < .2.NO
  121.         2.RO.40.fontColor = #ffcf11
  122.        
  123.        
  124.         //// Wenn Unterseiten vorhanden sind
  125.         2.IFSUB < .2.NO
  126.         2.IFSUB {
  127.                 31 = IMAGE
  128.                 31.file = fileadmin/images/nav/dreiecke_5x9_weiss.png
  129.                 31.offset = 186, 7
  130.         }
  131.        
  132.         //// Roll-Over, wenn Unterseiten vorhanden sind
  133.         2.IFSUBRO < .2.IFSUB
  134.         2.IFSUBRO.31.file = fileadmin/images/nav/dreiecke_5x9_gelb.png
  135.         2.IFSUBRO.40.fontColor < .2.RO.40.fontColor
  136.        
  137.         //// Aktiv-Status des übergeordneten Elements vorgeben
  138.         2.ACT < .2.IFSUBRO
  139.        
  140.         //// Aktiv-Status vorgeben
  141.         2.CUR < .2.RO
  142.  
  143.  
  144. //// Menü 3./4./5. Ebene
  145.        
  146.         3 < .2
  147.         4 < .2
  148.         5 < .2



es grüsst
stevee[/TYPOSCRIPT]

Profil

Kommentar von: Fr

02. 08. 2006, 11:16
Gutes Beispiel, wie wäre eins für 3 Menüebenen, wäre sicherlich noch interessanter...

Profil

Kommentar von: pootr

09. 05. 2006, 13:06
Da hier ein Beispiel fehlt, poste ich mal eins:

Typoscript:Zeilennummerierung:  An / Aus

  1. marks.MENU_2 = HMENU
  2.  marks.MENU_2.special = directory
  3.  marks.MENU_2.special.value = 1
  4.  marks.MENU_2.1 = GMENU_LAYERS
  5.  marks.MENU_2.1 {
  6.   layerStyle = position:absolute;left:230px;top:200px;width:0px;VISIBILITY:hidden;
  7.   xPosOffset = 50
  8.   expAll=1
  9.   dontFollowMouse = 1
  10.  
  11.  
  12.   NO = 1
  13.   NO {
  14.     XY = [10.w]+10, 29
  15.     10 = TEXT
  16.     allWrap =  |
  17.     transparentBackground = 1
  18.     10.antiAlias=0
  19.     10.text.field = title
  20.     10.offset = 5,17
  21.     10.fontColor = #000000
  22.     10.fontFile = fileadmin/verdana.ttf
  23.     10.fontSize = 8
  24. }
  25.  
  26.    RO = 1
  27.    RO{
  28.      XY = [10.w]+10, 29
  29.     10 = TEXT
  30.     allWrap =  |
  31.     transparentBackground = 1
  32.     10.antiAlias=0
  33.     10.text.field = title
  34.     10.offset = 5,18
  35.     10.fontColor = #FFFFFF
  36.     10.fontFile = fileadmin/verdana.ttf
  37.     10.fontSize = 9
  38.  
  39. }
  40.    
  41.  
  42. }


Hier zum Beispiel die erste Ebene eines Menus. Wird verwendet bei
Html4strict:Zeilennummerierung:  An / Aus

  1. <a href="http://www.pcmasters.de">http://www.PCMasters.de</a>


Profil

Kommentar von: pootr

09. 05. 2006, 13:05
Da hier ein Beispiel fehlt, poste ich mal eins:

Typoscript:Zeilennummerierung:  An / Aus

  1. marks.MENU_2 = HMENU
  2.  marks.MENU_2.special = directory
  3.  marks.MENU_2.special.value = 1
  4.  marks.MENU_2.1 = GMENU_LAYERS
  5.  marks.MENU_2.1 {
  6.   layerStyle = position:absolute;left:230px;top:200px;width:0px;VISIBILITY:hidden;
  7.   xPosOffset = 50
  8.   expAll=1
  9.   dontFollowMouse = 1
  10.  
  11.  
  12.   NO = 1
  13.   NO {
  14.     XY = [10.w]+10, 29
  15.     10 = TEXT
  16.     allWrap =  |
  17.     transparentBackground = 1
  18.     10.antiAlias=0
  19.     10.text.field = title
  20.     10.offset = 5,17
  21.     10.fontColor = #000000
  22.     10.fontFile = fileadmin/verdana.ttf
  23.     10.fontSize = 8
  24. }
  25.  
  26.    RO = 1
  27.    RO{
  28.      XY = [10.w]+10, 29
  29.     10 = TEXT
  30.     allWrap =  |
  31.     transparentBackground = 1
  32.     10.antiAlias=0
  33.     10.text.field = title
  34.     10.offset = 5,18
  35.     10.fontColor = #FFFFFF
  36.     10.fontFile = fileadmin/verdana.ttf
  37.     10.fontSize = 9
  38.  
  39. }
  40.    
  41.  
  42. }


Hier ein Beispiel der ersten Ebene von einem GMENU_Layer Menüs.
Wird verwendet bei
Html4strict:Zeilennummerierung:  An / Aus

  1. <a href="http://www.pcmasters.de">http://www.PCMasters.de</a>[/HTML>


Profil

Kommentar von: Wendelken

07. 02. 2006, 23:44
Wenn zusätzlich ein <Bod onLoad-Event eingebunden wird funktioniert hideMenuWhenNotOver nicht mehr.

Ich habe die Lösung gefunden und werde sie an der Quelle posten:

Da ich im Body folgenden Aufruf mache:

<body class="bodymainsite" onLoad="MM_preloadImages('fileadmin/templates/bilder_layout/head_livekontakt_on.gif',
'fileadmin/templates/bilder_layout/head_webcam_on.gif','fileadmin/templates/bilder_layout/head_sendung_on.gif',
'fileadmin/templates/bilder_layout/head_mod_on.gif','fileadmin/templates/bilder_layout/head_hilfe_on.gif',
'fileadmin/templates/bilder_layout/head_stream_on.gif')"
onload="T3_onloadWrapper();">

funktioniert das GMENU_LAYERS nicht mehr, da onload="T3_onloadWrapper(); nicht mehr aufgerufen wird.

LÖSUNG:

Die Extension "Body onEvents Javascript" installieren und nach Anleitung einbinden, schon sind alle Probleme verschwunden. :)

Habe die Extension per Zufall gefunden, nun geht alles wieder.



Kommentar von: Andreas

30. 12. 2005, 12:26
Ein paar Anmerkungen zu dem Beispiel.

Das GMENU_LAYERS sollte natürlich (bei einem horizontalen Menü) folgendermaßen in ein Konstrukt eingebunden werden, damit das GMENU überhaupt mitbekommt, ab welcher Stelle es das Menü aufbauen soll.

Typoscript:Zeilennummerierung:  An / Aus

  1. MENU_OBEN = HMENU
  2. MENU_OBEN {
  3.   special = directory
  4.   special.value = 50
  5.   entryLevel = 1
  6.   1 {
  7.     ....
  8.   }
  9. }


Wobei "MENU_OBEN" eurem Platzhalter in dem HTML Dokument entspricht -> ###MENU_OBEN### - und der Wert hinter "special.value" die ID eures Einstiegsdokuments ist.
(Die ID wird angezeigt, wenn ihr den Mauscursor über ein Seitensymbol bewegt)


Zum Schluss wollte ich noch sagen, dass
... das GMENU_LAYERS sich innerhalb des PAGE Obejekts befinden muss, in dem ihr die scripts eingebunden habt. Also irgendwo in der Zeile 5 [...]
... ihr evtl. die Option niceText auf 0 ändern müsst
... das fontfile anpassen solltet

-> ansonsten dürfte es eigentlich keine Probleme geben


Kommentar von: Andreas

30. 12. 2005, 11:58
Hallo zusammen.
Da ich ebenfalls Anfänger bin und eine Weile gebraucht habe um ein GMENU_LAYERS zum Laufen zu bekommen, möchte ich euch ein funktionierendes Beispiel nicht vorenthalten.

Nach dem Erzeugen des PAGE Objekts müssen die entsprechenden "scripts" inkludiert werden.

Bsp.:
Typoscript:Zeilennummerierung:  An / Aus

  1. page = PAGE
  2. page {
  3.    [...]
  4.    includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
  5.    [...]
  6. }


Nun kann das grafische Menü eingebunden werden. Folgende Code Zeilen funktionieren bei mir..

Typoscript:Zeilennummerierung:  An / Aus

  1. 1 {
  2.   wrap=<table cellspacing="0" cellpadding="0"><tr>|</tr></table>
  3.   layerStyle =position:absolute;VISIBILITY:hidden;
  4.   xPosOffset = -30
  5.   lockPosition = y
  6.   expAll=1
  7.   leftOffset = 15
  8.   topOffset = 30
  9.   hideMenuWhenNotOver = 1
  10.   hideMenuTimer = 250
  11.   relativeToTriggerItem = 1
  12.   NO {
  13.     wrap=<td>|</td>
  14.     backColor = #061467
  15.     XY = 150, 22
  16.     10 = TEXT
  17.     10 {
  18.       text.field = title
  19.       offset = 5,15
  20.       fontColor = #FFFFFF
  21.       fontFile = fileadmin/fonts/verdana.ttf
  22.       fontSize = 14
  23.       fontStyle = bold
  24.       niceText = 1
  25.     }
  26.   }
  27.   CUR = 1
  28.   CUR {
  29.     wrap=<td>|</td>
  30.     backColor = #364496
  31.     XY = 150, 22
  32.     10 = TEXT
  33.     10 {
  34.       text.field = title
  35.       offset = 5,15
  36.       fontColor = #FFFFFF
  37.       fontFile = fileadmin/fonts/verdana.ttf
  38.       fontSize = 14
  39.       fontStyle = bold
  40.       niceText = 1
  41.     }
  42.   }
  43.   RO = 1
  44.   RO {
  45.     wrap=<td>|</td>
  46.     backColor = #364496
  47.     XY = 150, 22
  48.     10 = TEXT
  49.     10 {
  50.       text.field = title
  51.       offset = 5,15
  52.       fontColor = #FFFFFF
  53.       fontFile = fileadmin/fonts/verdana.ttf
  54.       fontSize = 14
  55.       fontStyle = bold
  56.       niceText = 1
  57.     }
  58.   }
  59. }
  60. 2 = GMENU
  61. 2 {
  62.   expAll=1
  63.   NO {
  64.     wrap=|<br>
  65.     backColor = #EEEEEE
  66.     XY = 130, 20
  67.     10 = TEXT
  68.     10 {
  69.       text.field = title
  70.       offset = 5,15
  71.       fontColor = #000000
  72.       fontFile = fileadmin/fonts/verdana.ttf
  73.       fontSize = 12
  74.       niceText = 1
  75.     }
  76.   }
  77.   RO = 1
  78.   RO {
  79.     wrap=|<br>
  80.     backColor = #364496
  81.     XY = 130, 20
  82.     10 = TEXT
  83.     10 {
  84.       text.field = title
  85.       offset = 5,15
  86.       fontColor = #FFFFFF
  87.       fontFile = fileadmin/fonts/verdana.ttf
  88.       fontSize = 12
  89.       niceText = 1
  90.     }
  91.   }
  92. }


Ich hoffe das ich euch helfen konnte. ;o)


Kommentar von: Oliver Emrich

25. 11. 2005, 9:32
Ich kann meinen Vorrednern nur zustimmen. Ein Beispiel an dieser Stelle wäre mehr als angebracht.

Beispiel! Beispiel! Beispiel!icon_wink.gif


Kommentar von: rener

02. 10. 2005, 10:22
Ja, ein funktionierendes Beispiel würde hier die Seite deutlich (gerade für mich als Anfänger) aufwerten.


Kommentar von: Dieter Flügel

11. 09. 2005, 14:10
Ich bin eben, durch Zufall auf diese Seiten gestossen. Gut gemacht, aber:
Wenn man sich z.B. selfHTML anschaut, sind über all
mehr oder weniger sinnvolle Beispiele bei. Hier würde es, besonders für Neulinge wie mich helfen.




Seite drucken
 
TYPO3 Version 4.2.2 testen

TYPO3 Ver. 4.2.2 testen

Testen Sie die neue TYPO3 Version 4.2.2 kostenlos für einen Monat

TYPO3 Bücher

TYPO3 Workshops


TYPO3 Einführungsschulung
in Berlin:
Montag, 17.11.
in Espelkamp:
Freitag, 08.12.

TYPO3 Intensivschulung
in Würzburg:
Mo., 27.10. - Mi., 29.10.
in Köln:
Mo., 10.11. - Mi., 12.11.
in Berlin:

Mi., 19.11. - Fr., 21.11.
in Espelkamp:

Mi., 10.12. - Fr., 12.12.

TYPO3 Extensionschulung
in Berlin:
Mo., 24.11. - Mi., 26.11.
in Espelkamp:
Mo., 15.12. - Mi., 17.12.