Horizontales GMENU_LAYERS oder TMENU_LAYERS kaskadierend

typoworxx · 2003-05-30T15:51:37+00:00

Hallo, ich habe einige Tage mit dem TMENU_LAYERS und GMENU_LAYERS gekämpft um folgendes Menü zu realisieren. Ein horizontales Hauptmenu als GMENU_LAYERS, das abhängig von der Browserfensterbreite auf dem Bildschrim plaziert wird. Wenn man mit der Maus auf einen der Hauptmenüpunktegeht, soll ein Layer mit einem neuen Menü darunter eingeblendet werden. Geht man in diesem Menü auf einen der Menüpunkte soll daneben ein Layer mit einem neuen Menü eingeblendet werden... (Wie das typische kaskadierende Menü von Windows...). Mein Problem war, dass das Hauptmenü an unterschiedlichen Positionen liegen kann, und deswegen die Layer nich absolut positioniert werden dürfen. Es ist etwas nervig, dass ein fehlendes Zeichen oder ein falscher Eintrag das ganze Menü unbrauchbar machen kann. Aber in welcher Script-/Programmiersprach ist das nicht so. Die Stylesheetdatei und die Designvorlage sowie die Font-Datei müssen in die enstprechenden Verzeichnisse gelegt werden. Falls die Verzeichnisse noch nicht existieren, können Sie einfach angelegt werden, oder man benutzt eigene Verzeichnisse, muss dann aber die Pfade im TS ändern. Statt des GMENU_LAYERS funktioniert es auch mit TMENU_LAYERS für die erste Ebene (Habe ich getestet). Wenn die Ausdrucksweise nicht überall korrekt ist, bitte nicht schimpfen, ich habe das schnell mal so hingeschrieben. Demnächst (Ab Ende Juni, Anfang Juli) kann man das ganze auch live sehen. (Adresse gebe ich dann noch an. Mit folgendem TS wird die Seite und das Menü erzeugt: ######################################### #Ein Objekt vom Typ PAGE mit dem Namen page erzeugen ######################################### page = PAGE ######################################### #Das MetaTag-Plugin aktivieren. Es muss im Erw.-Manager installiert sein. #Kann weggelassen werden, wenn keine Metatags verwendet werden sollen. ######################################### page.headerData.999 < plugin.meta ######################################### #Die DC-Metatags deaktivieren. Die sind im allgemeinen nicht nötig ######################################### page.headerData.999.flags.DC = 0 ######################################### #Seitentyp definieren - immer nötig ######################################### page.typeNum = 0 ######################################### #libs und stylesheets laden ######################################### ######################################### #lib für Grafikmenü mit automatichen Layern bei Mouseover ######################################### page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php ######################################### #lib für Textmenü mit automatichen Layern bei Mouseover ######################################### page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php ######################################### #css mit Styles für das Menü, oder mehr... ######################################### page.stylesheet = fileadmin/stylesheets/standard.css ######################################### #Ein Objekt vom Typ TEMPLATE mit dem Namen 10 erstellen ######################################### page.10 = TEMPLATE ######################################### #Einstellungen für das Template (Objekt 10) vornehmen ######################################### page.10{ ######################################### #Den Typ des Templates als FILE definieren ######################################### template = FILE ######################################### #Den Dateinamen des FILES (In diesem Fall Designvorlage) angeben. #Das File wird automatisch geladen. ######################################### template.file = fileadmin/templates_standard/standard.html ######################################### #In der Designvorlage muss ein Subpart DOKUMENT angegeben sein. #Der Subpart wird mit ###DOKUMENT### geöffnet und geschlossen. ######################################### workOnSubpart = EINE_SEITE ######################################### #Eine Objekt vom Typ CONTENT erzeugen im mark INHALT erzeugen. #Im Include static dieses Templates sollte mindestens content (default) eingetragen sein. #Der mark wird mit ###INHALT### in der Designvorlage eingetragen #ohne öffnen und schließen, der ganze mark wird ersetzt. ######################################### marks.INHALT = CONTENT ######################################### #Für das CONTENT-Objekt (mark.INHALT) die Tabelle mit dem Content angeben. #In der Regel tt_content ######################################### marks.INHALT.table = tt_content ######################################### #Eine Objekt vom Typ HMENU im mark MENU erzeugen. ######################################### marks.KOPF_MENU=HMENU ######################################### #Die Eigenschaften für das MENU setzen ######################################### marks.KOPF_MENU{ ########################################## #Gibt an ab welcher Ebene das Menü starten soll ########################################## entryLevel = 0 ########################################## #Definiert den Menütyp der ersten Ebene Level 0 ########################################## 1 = GMENU_LAYERS ########################################## #Eigenschaften der ersten Ebene ########################################## 1{ ########################################## #Die Breite des Menüs darf 1100 Pixel nicht überschreiten. #Alle Menüeinträge, die darüber hinaus gehen werden unterdrückt. #Kann auch komplett abgeschaltet werden! ########################################## #max=1100 ########################################## #Die Breite (Höhe) des breitesten (höchsten) Menüitems im Menü bestimmt die Breite (Höhe) aller Menüitems in diesem Menü ########################################## #useLargestItemX=1 useLargestItemY=1 ########################################## #Dieser Style wird für die Mouseovermenüs verwendet ########################################## layerStyle = position:absolute; width:150px;VISIBILITY:hidden; ########################################## #Setzt einen vertikalen Abstand der einzublenden Layer vom Bezugspunkt ########################################## topOffset=15 ########################################## #Setzt einen horizontalen Abstand der einzublenden Layer vom Bezugspunkt ########################################## leftOffset=5 ########################################## #Ein weiterer x-offset des Mouseovermenüs vom Aktivierungspunkt. ########################################## #xPosOffset =-16 ########################################## #Muss gesetzt werden, damit sich das Menü nicht mit der Maus mitbewegt. #Für horizontale Menüs in der Regel x (so wie hier), für vertikale y. ########################################## lockPosition = x ########################################## #Muss aktiviert werden damit alle Menuitems der nächsten Ebene im Layer angezeigt werden. ########################################## expAll=1 ########################################## #Wird aktiviert damit die Mouseovermenüs relativ zum Parentlayer positioniert werden. ########################################## relativeToParentLayer=1 ########################################## #Wird aktiviert damit die Mouseovermenüs relativ zum auslösenden Item positioniert werden. ########################################## relativeToTriggerItem=1 ########################################## #Wird aktiviert damit das Mouseovermenü beim verlassen des Layers #mit der Maus wieder ausgeblendet wird. ########################################## hideMenuWhenNotOver=1 ########################################## #Definiert den "NO"rmalen Zustand der Menüitems. #Weitere Zustände sind: #IFSUB -> Menüitems, die ein Untermenü haben #ACT -> Menüitems, die sich im aktuellen Pfad befinden #ACTIFSUB -> Kombination aus den beiden oberen #CUR -> Menüitem der aktuelle ausgewählten Seite #USR -> Seiten die beschränkte Zugriffsrechte haben #RO -> Mouseoverstatus eines Menüitems #SPC -> Paltzhaltermenüitems ########################################## NO{ ########################################## #Hinterrundfarbe der Menüitems setzen #die Option split (|*| #ccc...) wird sehr gut auf Seite 62 in Typoscript by Example erklärt ########################################## backColor=|*| #cccccc || #eeeeee |*| ########################################## #In der Dersignvorlage sollte eine Tabelle vorbereitet und eine göffnete sein in die dann die Menüitems #mit ihrem wrap " | " eingebaut werden. so wird verihndert, dass die Menüitems durch den Eintrag #"relativeToTriggerItem=1" weiter oben wieder untereinander gesetzt werden. #Wird in der Typoscript Reference Seite 127 erklärt. ########################################## wrap= | ########################################## #Größe des Gif-Bildes für den MenüItem. Wird in der TS-Referenz unter GifBuilder erklärt ########################################## XY = [10.w]+10, [10.h]+6 ########################################## #Erzeuge ein Objekt vom Typ TEXT mit dem Namen 10 ########################################## 10 = TEXT ########################################## #Definiere die Eigenschaften für das Textobjekt (10) ########################################## 10{ ########################################## #Zentriert den Text in Button ########################################## align = center ########################################## #Schhriftart - Das ttf-File wurde direkt in die Resourcen für dieses Template geladen #und kann so direkt verwendet werden. Andernfalls muss der gesamte Pfad zum File #angegeben werden. ########################################## fontFile = fileadmin/fonts/arial.ttf ########################################## #Schhriftgröße ########################################## fontSize = 10 ########################################## #Schhriftfarbe ########################################## fontColor = #ff0000 ########################################## #Gibt an welches Feld aus der Tabelle pages für den Button verwendet werden soll ########################################## text.field=title ########################################## #Gibt die Position des Textes in der Grafik an ########################################## offset=0,14 } } ########################################## #Kopiert das "NO"rmale Menüitem-Objekt in das "RO"llover Menüitem-Objekt ########################################## RO < .NO ########################################## #Aktiviert den Rollovereffekt ########################################## RO=1 ########################################## #Ergänzt die Eigenschaften des Rollover-Objektes ########################################## RO{ backColor=#000000 10.fontColor=#ffffff } ########################################## #Kopiert das "NO"rmale Menüitem-Objekt in das "ACT"ueller Pfad Menüitem-Objekt ########################################## ACT < .NO ########################################## #Aktiviert den "ACT"ueller Pfad-Effekt ########################################## ACT=1 ########################################## #Ergänzt die Eigenschaften des "RO"llover-Objektes ########################################## ACT{ backColor=#ffcccc 10.fontColor=#000000 } } ########################################## #Definiert den Menütyp der zweiten Ebene Level 1 ########################################## 2 = TMENU_LAYERS ########################################## #Eigenschaften der zweiten Ebene ########################################## 2{ layerStyle = position:absolute;width:150px;VISIBILITY:hidden; topOffset=0 leftOffset=60 #xPosOffset =-50 lockPosition = x expAll=1 relativeToParentLayer=1 relativeToTriggerItem=1 hideMenuWhenNotOver=1 ########################################## #So wird das komplette Tag | um das Objekt "2" (gesamtes Menü) gelegt. #In der Stylesheet-Datei gibt es eine ID "js-menu" die das aussehen des Layers bestimmt. ########################################## wrap= | NO{ linkWrap = | } ACT=1 ACT{ linkWrap= | } } ########################################## #Definiert den Menütyp der dritten Ebene Level 2 ########################################## 3 = TMENU_LAYERS ########################################## #Eigenschaften der dritten Ebene (in deisem Fall zu Ebene 2 identisch) ########################################## 3{ layerStyle = position:absolute;width:150px;VISIBILITY:hidden; topOffset=0 leftOffset=60 #xPosOffset =-50 lockPosition = x expAll=1 relativeToParentLayer=1 relativeToTriggerItem=1 hideMenuWhenNotOver=1 ########################################## #So wird das komplette Tag | um das Objekt "2" (gesamtes Menü) gelegt. ########################################## wrap= | NO{ linkWrap = | } ACT=1 ACT{ linkWrap= | } } ########################################## #Für die vierte Ebene wird hier nur ein normales Textmenü verwendet #-> Kaskadierung bis zu vierten Ebene ########################################## 4 = TMENU 4{ wrap= | NO{ linkWrap = | } ACT=1 ACT{ linkWrap= | } } } ######################################### #Eine Objekt vom Typ HMENU im mark SUBMENU erzeugen. ######################################### marks.SUBMENU=HMENU ######################################### #Die Eigenschaften für das SUBMENU setzen ######################################### marks.SUBMENU{ wrap= | ######################################### #Das Menü soll erst die Einträge ab der dritten Ebene (level 2) anzeigen ######################################### entryLevel = 2 expAll = 0 1 = TMENU 1{ NO{ linkWrap = | } ########################################## #Aktiviert den "ACT"ueller Pfad-Effekt ########################################## ACT=1 ########################################## #Ergänzt die Eigenschaften des "ACT"tuellen Objektes ########################################## ACT{ ########################################## #Ein Wrap um das ganze Menü legen. Dieses DIV wird um das Menü gelegt #Damit das Design über Stylesheets gesteuert werden kann. #Die Styles liegen in der oben intgrierten Sytelsheets-Datei. ########################################## linkWrap= | } } } } Die nötige Designvorlage sieht folgendermaßen aus: Einige marks werden von dem oben angegebenen Template nicht verwendet Vorlage für Typo3 ###DYN_GRAFIK### ###KOPF_MENU### Service ###TOOLBAR### Voting ###VOTING### ###INHALT### Subnavigation ###SUBMENU### Und hier noch die stylesheetdatei: body { background-color: #bbbbbb } #main{ } a { color: #000000; /* Allgemeine Textfarbe */ text-decoration: none; } a:hover { text-decoration : underline; } body, td, h1, h2, h3, input, textarea, div, p, table{ /* --- Standardtextart und -größe werden festgelegt --- */ font-family: Verdana, Helvetica, sans-serif; font-size : 10px; line-height: 15px; /* Zeilenabstand */ color: #000000; /* allgemeine Textfarbe */ } #kopfmenu{ width: 610px; height:20px; background-color: #d2d2d2; border: 1px solid #000000; color: #ffffff; margin-right: 7px; margin-bottom: 5px; } #menu { /* --- #menu ist das Hauptmenu (meistens links) --- */ position: relative; padding: 0px; text-align: left; background-color: #D2D2D2; border: 1px solid #000000; height: 75%; } #top { /* --- #top ist der obere Bereich --- */ height : 150px; top: 0px; } .logo { top : 60px; left : 0px; } .topbild1 { /* --- #topbild ist das (dynamisch austauschbare) Bild oben im Topbereich --- */ margin: 0px; padding: 0px; } .hintergrund{ background-image: url(../gifs/gesamt_htg.gif); background-repeat: repeat-y; } #submenu, #toolmenu, #votingmenu{ /* -------------- Der Bereich "Tourdaten" und "Voting" -------------- */ font-family: Verdana, Helvetica, sans-serif; font-size : 10px; height:10px; background-color: #d2d2d2; border: 1px solid #ACA48E; text-align: left; margin-bottom: 20px; padding: 1px; } #submenu a, #toolmenu a, #votingmenu a{ display: block; margin-left: 5px; line-height : 1.8em; text-decoration: none; color:black; } #submenu a:hover, #toolmenu a:hover{ display: block; margin-left: 5px; line-height : 1.8em; text-decoration: underline; } #submenu{ height:100%; } .boxhead{ /* -------------- Überschirft im Bereich "Tourdaten" und "Voting" -------------- */ background-color : #FE8000; border-bottom: 1px solid #ffffff; color: #ffffff; font-weight: bold; padding: 1px; padding-left: 5px; } #js-menu{ background-color: Silver; border-color: black; border: 1px solid; padding-left: 5px; padding-bottom: 3px; float:left; width:150px; filter: Alpha(opacity=100, finishopacity=50, style=1); } #js-menu a{ margin-left: 5px; text-decoration: none; color:black; } #js-menu a:hover{ margin-left: 5px; text-decoration: underline; color:black; } #inhalt { /* --- #inhalt ist der Bereich für die Seiteninhalt. (Wirkungsbereich der Templates) --- */ position: relative; background-color: #eeeeee; border: 1px solid #ACA48E; height: 100%; padding: 15px; } h1 { /* --- Überschrift erster ordnung --- */ position: relative; margin: -15px -15px 0px -15px; padding : 1px 12px 2px 15px; font-weight : bold; font-size: 11px; color: #ffffff!important; background-color : #FE8000; border-bottom: 1px solid #ffffff; } h2 { /*line-height : 1.2em;*/ font-size : 1.3em; font-weight: bold; /*margin : 0em 0px 0em -15px; padding-left : 15px;*/ /*padding : 2em 0.5em 0.5em 15px;*/ text-align : left; /* Text innerhalb von H2 wird rechts ausgerichtet */ clear : both; float : none; } h3 { } h4 { } Das fehlende Hintergrundbild "background-image: url(../gifs/gesamt_htg.gif);" kann durch ein beliebiges ersetzt werden

BigMac · 17. Juni 2003 19:21

nein, denn ich habe Deines aus dem Posting genommen.

Irgend eine Idee ?

das GMENU_LAYERS wird noch sauber angezeigt, alles weitere dann nicht mehr.

Tschau Marco

via · 17. Juni 2003 19:24

wenn deine marker nicht die gleich bezeichnuhng haben wie im TS, dann würde ich sie einfach ändern

BigMac · 17. Juni 2003 19:27

Wie gesagt, ich habe Dein Template aus dem Posting genommen, ich habe eigentlich nicht feststellen können, daß da die Markers ander waren.

Grüße Marco

via · 17. Juni 2003 19:30

also, es ist zwar nicht "mein" template, sondern das von typoworxx (siehe oben).

also, wenn die marker deines html templates mit den markern des TS templates übereinstimmen, dann müsstest Du typoworxx mal direkt fragen. mein beitrag war nur eine anmerkung bzgl. einer möglichen fehlerquelle.

grüße,
oliver

typoworxx · 19. Juni 2003 09:16

Bin gerade aus dem Urlaub zurück :-( und habe von deinen Problemen gelesen.
Schicke mir doch einfach mal dein Template und die Designvorlage, vielleicht erkenne ich das Problem ja.

elmondo · 13. Juli 2003 22:34

Wo kann man das denn nun live sehen ?

elmondo · 13. Juli 2003 22:42

Wo kann man das denn nun live sehen ?

typoworxx · 28. Juli 2003 17:43

Hat leider doch etwas länger gedauert :-( aber hier kann man sich das Menü jetzt anschauen :-) :

http://www.testixx.de

user: demo
pass: demo

Sorry für die Verspätung

Jadro · 30. Juli 2003 10:54

Hallo,

zunächst vielen Dank für das Skript. Es hat mir schon sehr viel weiter geholfen.

Ich habe es mit meiner Dokumentenvorlage verknüpft und es funktioniert in etwa.

Mein horizontales Menü beginnt aber erst am rechten Bildrand und nicht ganz links.

Außerdem wird das Menu nicht auf der ersten Seite angezeigt, sondern nur auf den untergeordneten Seiten.
http://www.jadro-net.de/typo3/index.php?id=4 und
http://www.jadro-net.de/typo3/index.php?id=6

kannst Du mir einen Tipp geben?

Gruss
Gerhard

typoworxx · 30. Juli 2003 15:42

Hallo Gerhard,

wenn ich auf die angegebenen Links gehe sehe ich überhaupt kein Menü in der Seite!

Gruß

Jörg

Jadro · 30. Juli 2003 15:58

Hallo,

Im ersten Link (Level0) fehlt die Navi auch. Der zweite Link ist eine Seite aus dem Level 1. Hier wird die Navi angezeigt, allerding rescht im Anschluss an Designvorlage.

wo ich Hilfe brauche:
Warum wird das Menu nicht auch auf der ersten Seite angezeigt?
Wie schaffe ich es, das das Menu die richtige Position bekommt.

Gruss
Gerhard

typoworxx · 30. Juli 2003 16:27

Schick mir die Designvorlage einfach mal. Vielleicht sehe ich warum das menü nicht an der richtigen Position angezeigt wird.

Warum es nicht auf der ersten Ebene angezeigt wird kann ich mir nicht erklären.

Hats Du das Haupttemplate auf der ersten Seite erstellt und als Rootlevel definiert?

downset · 24. September 2003 13:20

Hallo.
Erstmal Danke für die Ausführungen hier, mit deren Hilfe ivh endlich so einiges begriffen habe. Jetzt aber mal was anderes, was eigentlich kein Problem sein sollte, bei mir aber nicht hinhaut.

Ich habe das Template mal Testweise übernommen und es funkrioniert auch einwandfrei. Allerdings würde ich die einzelnen Markern gerne zuordnen, sprich links/recht/border.

also styles.content.get.left usw.
wie muss das Template dann aussehen?

Habe es mit verschiedenen schreibweisen versucht und auch das Tut gelesen. Aber nichts funktioniert richtig. Vielleicht (so meine vermutung) stehen diese Angaben in Konflikt mit anderen. kann ja sein?

Wie gesagt ich benutze Template und so weiter wie oben angegeben.

downset · 30. September 2003 01:00

wie bekomme ich den act(uellen) Pfad effekt jetzt einen Level weiter nach unten? wenn ich im Horizontalen Menue einen ersten Unterpunkt wähle zeigt mir der aktuelle pfad auch ne anständige auswahl an. wenn ich aber einen level tiefer will geht das nicht und nur der erste sublevel des menues wir angezeigt.

redrat · 30. September 2003 14:11

Hallo zusammen,

ich stand vor einem ähnlichen Problem ein Drop-Down Menu unabhängig von der Browser-Breite darzustellen. Allerdings mit nur einer Unterebene.

Hab's auch gut hinbekommen, allerdings wird das Menu im Opera nicht richtig positioniert (sitzt immer ziemlich weit oben links mit immer dem gleichen Abstand vom Rand). Hat jemand das gleiche Problem? Oder besser, gibt es jemandem bei dem es auch mit Opera funktioniert?

bis dann,
red

s.sach · 30. September 2003 14:24

Hab das gleiche Problem mit Opera. Das Menü ist total verschoben. Hab das Menü von typoworxx in angepasster Form im Einsatz. Wenn jemand einen Lösungsansatz hat, wäre ich ebenfalls sehr dankbar.

Cre8tive · 1. Dezember 2003 21:47

hallo.

ich habe alle szum test mal 1:1 übernommen.

bei mir funktioniert das soweit, nur die erste hirachie der navigation wird nie angezeigt.

ich bekomme aber immer die meldungen:
Warning: ImageTtfBBox: No TTF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 604

Warning: ImageTtfBBox: No TTF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 604

Warning: ImageTtfText: No TTF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 733

Warning: ImageGif: No GIF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 1405

Warning: ImageTtfBBox: No TTF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 604

Warning: ImageTtfText: No TTF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 733

Warning: ImageGif: No GIF support in this PHP build in /www/home124/html/t3lib/class.t3lib_stdgraphic.php on line 1405

Ich gehe davon aus, da die erste Hirachie ja scheinbar als Grafik ausgegeben wird, dass bei meinem webspace kein ImageMagic installiert ist. Ist mir auch eigentlich egal, ist es möglich das auch als Text auszugeben? Also, dass die oberste Hirachie in der Navigation nicht als Grafik generiert wird?
Wäre auch für die Ladezeiten imho besser.

Was müsste ich ändern?
Danke im Vorraus.

paopao · 6. September 2004 12:44

Hallo,

habe ein ähnliches Problem.

Ich möchte mittels TYPO3 Skript ein horizontales Menü erstellen, wo die weiteren (2, 3, 4 usw.) Menüs auch als horizontales Menü unter dem ersten
dargestellt werden.

Für Tipps wäre ich sehr dankbar!

MfG
paopao

nahuel · 27. Oktober 2004 12:51

so der thread ist zwar uralt aber ch versuchs trozdem einmal hier bevor ich einen neuen aufmache

also ich hab das TS auf mein template umgeschrieben und es funktioniert alles wunderbar NUR wollte ich auch gern die erste eben als TMENU und nicht als GMENU und wenn ich enfach nur das g mit einem t tausche dann hab ich da eine vertikales statt einem horizontalen menu!!

naja und da wollt ich fragen ob wer mir helfen kann
bitte
total noobige grüsse

nahuel

stefansvw · 15. Juni 2005 11:30

Hallo bei mir läuft alles vorzüglich.

Ich habe nur eine kleine Frage:

Ich habe in meinem Template nun zwei marker Positioniert ###TITLE### und ###SUBTITLE### ich will nun erreichen das die erste Ebene im marker title und die zweite Layer-Ebene im marker subtitle angezeigt wird.

Wie mache ich das.

Ich habe bis jetzt erreicht den Subtitle auszufüllen.

marks.SUBTITLE = TEXT
marks.SUBTITLE.field = title

aber wie bekomme ich nun die erste Ebene in den Title (text.field=title) ?

Kann mir jemand einen kleinen Stoß geben ?

Gruß
Stefan