Horizontales GMENU_LAYERS oder TMENU_LAYERS kaskadierend: Seite 2

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

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

alexd0001 · 21. Juni 2005 13:26

hi - danke für den code, kam damit wunderbar zurecht..

gruß alex

andiKeller · 22. September 2005 18:37

Hi typoworxx,
Nach langem suchen nach einer Lösung für mein Problem bin ich auf dein TS gestosen. Mein Problem ist folgendes: Ich habe meine Seite mit divs strukturiert, die ganze Seite ist im Browserfenster zentriert. Nun funktioniert aber offenbar die Ausrichtung einer Unternavigation am Parent Layer so nicht, sie wird am Browserfenster absolut ausgerichtet, ich möchte sie aber relativ zum Button der übergeorneten Navigation ausrichten.

Ich möchte eigentlich genau die Darstellung wie auf deiner Demo-Seite, eifach mit einem div-Layout. Geht das deiner Meinung nach überhaupt, oder funktioniert das nur mit Tables?

Gruss
Andi

Moeffz · 23. September 2005 13:51

Moin,

ich habe sehr lange mit div's probiert und es nicht geschafft. In der TSRef steht ja drin, dass die Menüelemente in einer Tabelle formatiert werden soll ten(dt. Version hier auf den Seiten), wenn das Menü horizontal sein soll.

steffenk · 23. September 2005 18:52

Hi,

ich bin auf das Menü gestossen und wollte es nachbauen - aber das klappt nicht.
Woher kommen denn gmenu_layers.php und tmenu_layers.php ???

Ich habe TS, template und css hochgeladen und eingebunden, pfade soweit angepasst, würde das gerne mal ausprobieren.

Dalerion · 19. Oktober 2005 16:09

Hmm... Ich weiß, der Eintrag ist alt, aber auch ich werde nun mal mein Glück versuchen in der Hoffnung, dass mir jemand helfen kann. Ich habe dieses menü als GMENU_Layer generiert und es funktioniert einwandfrei. Ich brauche aber ein TMENU_Layer, weil ich ein paar CSS Dateien übergeben muss, leider funzt es als TMENU_Layer nicht mehr. Hier mal der code, bisher aber nur Level 0:

page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
lib.HauptMenu = HMENU
  # First level menu-object, textual
lib.HauptMenu.1 = GMENU_LAYERS
lib.HauptMenu.1 {
   entryLevel = 0
   #useLargestItemX = 1
   useLargestItemY = 1
   layerStyle = position:absolute;width:150px;VISIBILITY:hidden;
   #layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; 
   topOffset = 15
   leftOffset = 5
   xPosOffset = -16
   lockPosition = x
   exp=All
   relativeToParentLayer = 1
   hideMenuWhenNotOver = 1
   NO{
       wrap =  | &nbsp;
       XY = [10.w]+10,[10.h]+6
       10 = TEXT
       10{
           align = center
           fontFile = fileadmin/fonts/arial.ttf
           fontSize = 20
           fontColor = #ff0000
           text.field = title
           offset = 0,14
           #offset= 5,10
           }
       }
       
   RO < .NO
   RO = 1
   RO{
       backColor=#000000
       fontColor=#ffffff
   }
   ACT < .NO
   ACT = 1
   ACT{
         backColor=#ffcccc
         fontColor=#000000
         }
}

Gruß Dale