Zum Inhalt springen

grafisches Menu - HowTo?

Erstellt am 23. September 2003 · 15 Antworten · letzte Antwort am 10. Juli 2009

Tags: Frage

jweiland ·

Siggi,

hier mal der komplette Setup Code für ein GMENU mit 5 Ebenen, vielleicht hilft es ja:

page.10.subparts {
MENU = HMENU
MENU.1 = GMENU
MENU.2 = GMENU
MENU.3 = GMENU
MENU.4 = GMENU
MENU.5 = GMENU
}

page.10.subparts.MENU.1.NO {
wrap = |<BR>
XY = [10.w],[10.h]
maxWidth = 167
format = gif
reduceColors = {$styles.gmenu.reduceColors}
10 = IMAGE
10.file = {$styles.gmenu.L1.file.bgImg}
20 = TEXT
20 {
text.field = nav_title // title
fontFile = {$styles.gmenu.L1.file.fontFile}
fontColor = {$styles.gmenu.L1.fontColor}
fontSize = {$styles.gmenu.L1.fontSize}
offset = {$styles.gmenu.L1.offset}
maxWidth = 167
niceText = 1
niceText.scaleFactor = 5
niceText.sharpen = 30
antiAlias = 0
}
}

page.10.subparts.MENU.1.RO < page.10.subparts.MENU.1.NO
page.10.subparts.MENU.1.RO = 1
page.10.subparts.MENU.1.RO.20.fontColor = {$styles.gmenu.L1.RO.fontColor}
page.10.subparts.MENU.1.ACT < page.10.subparts.MENU.1.RO
page.10.subparts.MENU.1.ACT = 1

page.10.subparts.MENU.2 < page.10.subparts.MENU.1
page.10.subparts.MENU.2.NO {
10.file = {$styles.gmenu.L2.file.bgImg}
20 {
fontFile = {$styles.gmenu.L2.file.fontFile}
fontColor = {$styles.gmenu.L2.fontColor}
fontSize = {$styles.gmenu.L2.fontSize}
offset = {$styles.gmenu.L2.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.2.RO < page.10.subparts.MENU.2.NO
page.10.subparts.MENU.2.RO = 1
page.10.subparts.MENU.2.RO {
20.fontColor = {$styles.gmenu.L2.RO.fontColor}
}

page.10.subparts.MENU.2.ACT < page.10.subparts.MENU.2.RO
page.10.subparts.MENU.2.ACT = 1

page.10.subparts.MENU.3 < page.10.subparts.MENU.2
page.10.subparts.MENU.3.NO {
10.file = {$styles.gmenu.L3.file.bgImg}
20 {
fontFile = {$styles.gmenu.L3.file.fontFile}
fontColor = {$styles.gmenu.L3.fontColor}
fontSize = {$styles.gmenu.L3.fontSize}
offset = {$styles.gmenu.L3.offset}
# niceText = 0
# antiAlias = 1
}
}

page.10.subparts.MENU.3.RO < page.10.subparts.MENU.3.NO
page.10.subparts.MENU.3.RO = 1
page.10.subparts.MENU.3.RO {
20.fontColor = {$styles.gmenu.L3.RO.fontColor}
}

page.10.subparts.MENU.3.ACT < page.10.subparts.MENU.3.RO
page.10.subparts.MENU.3.ACT = 1

page.10.subparts.MENU.4 < page.10.subparts.MENU.3
page.10.subparts.MENU.4.NO {
10.file = {$styles.gmenu.L4.file.bgImg}
20 {
fontFile = {$styles.gmenu.L4.file.fontFile}
fontColor = {$styles.gmenu.L4.fontColor}
fontSize = {$styles.gmenu.L4.fontSize}
offset = {$styles.gmenu.L4.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.4.RO < page.10.subparts.MENU.4.NO
page.10.subparts.MENU.4.RO = 1
page.10.subparts.MENU.4.RO {
20.fontColor = {$styles.gmenu.L4.RO.fontColor}
}

page.10.subparts.MENU.4.ACT < page.10.subparts.MENU.4.RO
page.10.subparts.MENU.4.ACT = 1

page.10.subparts.MENU.5 < page.10.subparts.MENU.4
page.10.subparts.MENU.5.NO {
10.file = {$styles.gmenu.L5.file.bgImg}
20 {
fontFile = {$styles.gmenu.L5.file.fontFile}
fontColor = {$styles.gmenu.L5.fontColor}
fontSize = {$styles.gmenu.L5.fontSize}
offset = {$styles.gmenu.L5.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.5.RO < page.10.subparts.MENU.5.NO
page.10.subparts.MENU.5.RO = 1
page.10.subparts.MENU.5.RO {
20.fontColor = {$styles.gmenu.L5.RO.fontColor}
}

page.10.subparts.MENU.5.ACT < page.10.subparts.MENU.5.RO
page.10.subparts.MENU.5.ACT = 1

siggi ·

Hallo jweiland,

Prima Anregungen. Konnte sie leider nicht nachvollziehen, da ich bei GMENU schon an der Einbindung der Grafikdatei scheitere:

...10 = IMAGE
...10.file = fileadmin/images/bg.gif

Anbei die URL zum Seitendesign, das ich in Typo3 umsetzen möchte zur Verdeutlichung:

http://www.fluessiggas-laudemann.de/design

Der Typo3-Versuch ist erreichbar unter:

http://www.fluessiggas-laudemann.de/test

Alles klappt - z.B. backColor, XY, etc. Jedoch bekomme ich das IMAGE nicht zur Anzeige. Auch werden die eingebundenen fontFiles katastrophal angezeigt. Kann es sein, daß ein Problem mit ImageMagick dahinter steckt? Als Provider habe ich All-Inkl und dieser hat ImageMagick, allerdings in der neuen Version integriert.
Muß ich hier noch bestimmte Konfigurationen vornehmen?

Das Beispiel der Seite
http://testsite.musterfirma.net/84.0.html
ist sehr interessant. gibt es hier den Setup-Code dafür?

Also noch einmal Danke für die Mühe.

Gruß Siggi

tony ·

>>Ich habe gerade zur Einführung in Typo3 das "Modern Templ. Building 1" durchgearbeitet. Ging auch alles gut nachzuvollziehen.<<

Woher hattest du die Dateien zu "Modern Templ. Building 1" ?

Ich finde überall nur einen toten Link?!

tony

jweiland ·

Hallo Siggi,

schau doch mal im Admin Panel beim generierten TS Code ob da irgendwo Fehlermeldungen auftauchen. Entweder ist der Pfad zum Bild nicht korrekt oder die Rechte sind nicht richtig gesetzt.

Hast du im Install Tool geprüft, das GIF Dateien gelesen und geschrieben werden können?

Den Setup-Code auf der Testsite kannst du dir selber anschauen, einfach in das Backend als admin mit Passwort 'password' einloggen.

Jochen Weiland

nora ·

Hallo Jochen,

Ich arbeite an einer Frameset-Seite die aus drei Frames besteht. Oben befindet sich ein Frame fürs Menü, darunter ein linker Frame mit wechselnden Grafiken und ein rechter Frame für den Content.
Etwa so also:

menu
########
gif # Inhalt
gif # Inhalt
gif # Inhalt

Das Menü habe ich erst zu Testzwecken als einfaches Textmenü mit ausklappendem Untermenü angelegt, und es funktionierte einwandfrei.

Jetzt wollte ich es mit einem grafischen Menü versuchen, und beiße mir daran die Zähne aus. Habe es mit einem Beispiel von dir probiert, aber als Typo3-Frischling bin ich auch damit nicht weit gekommen.
Könntest du mir bitte mitteilen, was ich mit diesen Variablen anstellen muss, die du im Beispiel nennst:

fontFile = {$styles.gmenu.L1.file.fontFile}
fontColor = {$styles.gmenu.L1.fontColor}
fontSize = {$styles.gmenu.L1.fontSize}
offset = {$styles.gmenu.L1.offset}

An welcher Stelle muss ich etwas includieren? Welche Änderungen muss ich vornehmen, um dein Beispiel auf meiner Seite zum laufen zu bringen?

page.10.subparts {
MENU = HMENU
MENU.1 = GMENU
MENU.2 = GMENU
MENU.3 = GMENU
MENU.4 = GMENU
MENU.5 = GMENU
}

page.10.subparts.MENU.1.NO {
wrap = |<BR>
XY = [10.w],[10.h]
maxWidth = 167
format = gif
reduceColors = {$styles.gmenu.reduceColors}
10 = IMAGE
10.file = {$styles.gmenu.L1.file.bgImg}
20 = TEXT
20 {
text.field = nav_title // title
fontFile = {$styles.gmenu.L1.file.fontFile}
fontColor = {$styles.gmenu.L1.fontColor}
fontSize = {$styles.gmenu.L1.fontSize}
offset = {$styles.gmenu.L1.offset}
maxWidth = 167
niceText = 1
niceText.scaleFactor = 5
niceText.sharpen = 30
antiAlias = 0
}
}

page.10.subparts.MENU.1.RO < page.10.subparts.MENU.1.NO
page.10.subparts.MENU.1.RO = 1
page.10.subparts.MENU.1.RO.20.fontColor = {$styles.gmenu.L1.RO.fontColor}
page.10.subparts.MENU.1.ACT < page.10.subparts.MENU.1.RO
page.10.subparts.MENU.1.ACT = 1

page.10.subparts.MENU.2 < page.10.subparts.MENU.1
page.10.subparts.MENU.2.NO {
10.file = {$styles.gmenu.L2.file.bgImg}
20 {
fontFile = {$styles.gmenu.L2.file.fontFile}
fontColor = {$styles.gmenu.L2.fontColor}
fontSize = {$styles.gmenu.L2.fontSize}
offset = {$styles.gmenu.L2.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.2.RO < page.10.subparts.MENU.2.NO
page.10.subparts.MENU.2.RO = 1
page.10.subparts.MENU.2.RO {
20.fontColor = {$styles.gmenu.L2.RO.fontColor}
}

page.10.subparts.MENU.2.ACT < page.10.subparts.MENU.2.RO
page.10.subparts.MENU.2.ACT = 1

page.10.subparts.MENU.3 < page.10.subparts.MENU.2
page.10.subparts.MENU.3.NO {
10.file = {$styles.gmenu.L3.file.bgImg}
20 {
fontFile = {$styles.gmenu.L3.file.fontFile}
fontColor = {$styles.gmenu.L3.fontColor}
fontSize = {$styles.gmenu.L3.fontSize}
offset = {$styles.gmenu.L3.offset}
# niceText = 0
# antiAlias = 1
}
}

page.10.subparts.MENU.3.RO < page.10.subparts.MENU.3.NO
page.10.subparts.MENU.3.RO = 1
page.10.subparts.MENU.3.RO {
20.fontColor = {$styles.gmenu.L3.RO.fontColor}
}

page.10.subparts.MENU.3.ACT < page.10.subparts.MENU.3.RO
page.10.subparts.MENU.3.ACT = 1

page.10.subparts.MENU.4 < page.10.subparts.MENU.3
page.10.subparts.MENU.4.NO {
10.file = {$styles.gmenu.L4.file.bgImg}
20 {
fontFile = {$styles.gmenu.L4.file.fontFile}
fontColor = {$styles.gmenu.L4.fontColor}
fontSize = {$styles.gmenu.L4.fontSize}
offset = {$styles.gmenu.L4.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.4.RO < page.10.subparts.MENU.4.NO
page.10.subparts.MENU.4.RO = 1
page.10.subparts.MENU.4.RO {
20.fontColor = {$styles.gmenu.L4.RO.fontColor}
}

page.10.subparts.MENU.4.ACT < page.10.subparts.MENU.4.RO
page.10.subparts.MENU.4.ACT = 1

page.10.subparts.MENU.5 < page.10.subparts.MENU.4
page.10.subparts.MENU.5.NO {
10.file = {$styles.gmenu.L5.file.bgImg}
20 {
fontFile = {$styles.gmenu.L5.file.fontFile}
fontColor = {$styles.gmenu.L5.fontColor}
fontSize = {$styles.gmenu.L5.fontSize}
offset = {$styles.gmenu.L5.offset}
# niceText = 0
# antiAlias = 0
}
}

page.10.subparts.MENU.5.RO < page.10.subparts.MENU.5.NO
page.10.subparts.MENU.5.RO = 1
page.10.subparts.MENU.5.RO {
20.fontColor = {$styles.gmenu.L5.RO.fontColor}
}

page.10.subparts.MENU.5.ACT < page.10.subparts.MENU.5.RO
page.10.subparts.MENU.5.ACT = 1[/quote]

jweiland ·

Könntest du mir bitte mitteilen, was ich mit diesen Variablen anstellen muss, die du im Beispiel nennst:

fontFile = {$styles.gmenu.L1.file.fontFile}
fontColor = {$styles.gmenu.L1.fontColor}
fontSize = {$styles.gmenu.L1.fontSize}
offset = {$styles.gmenu.L1.offset}

Diese Syntax verwendet Typoscript, um immer wieder benötigte Werte zentral an einer Stelle zu verwalten. Dazu trägt man unter CONSTANTS die Werte ein, z.B.

styles.gmenu.L1.fontSize = 12

und kann diese dann im Setup mit obiger Syntax ansprechen. Alternativ kann man natürlich die Werte auch direkt im SETUP angeben. Verwendet man einen Wert jedoch immer wieder, ist es viel praktischer das über CONSTANTS zu definieren. Bei Änderungen muss man diese dann nur an einer Stelle durchführen

Jochen Weiland

jweiland ·

bitte teile uns/mir mal mit, wie Du diese Testseite bzw. das Menü unter
http://testsite.musterfirma.net/84.0.html
gestaltet hast. Sowas habe ich schon oft versucht und bin bislang immer gescheitert!

Die Testsite stammt von Kasper, nicht von mir. Kannst dich selbst ins Backend einloggen ('admin', 'password') und nachschauen, wie die Seiten gemacht wurden. Hier der Code für das grafische Menü:

# The menu:
temp.customImageMenu = HMENU
temp.customImageMenu.1 = GMENU
temp.customImageMenu.1.NO {
  altImgResource.import = uploads/media/
  altImgResource.import.field = media
  altImgResource.import.listNum = 0

  # fall back GIFBUILDER item, if no result from altImgResource:
  XY = 226,20
  backColor = silver
  10 = TEXT
  10.text.field = nav_title // title
  10.offset = 10,13
  # wrap
  wrap = |<BR>
}
temp.customImageMenu.1.RO < temp.customImageMenu.1.NO
temp.customImageMenu.1.RO = 1
temp.customImageMenu.1.RO.altImgResource.import.listNum = 1



# Insert on page.
page = PAGE
page.typeNum =0

page.5 = TEXT
page.5.field = title
page.5.wrap = <h3>|</h3>
page.7 = TEXT
page.7.field = abstract
page.7.wrap = <i>|</i><HR>

page.10 < temp.customImageMenu

Jochen Weiland

nora ·

Danke für den Tip. Irgendwie auch logisch :o

Klappt aber leider immer noch nicht. Es wird eine weiße Seite angezeigt...

dom ·

Hallo,

erstmal danke für das Skript. Ich habe 8 Menüpunkte und die passenden Bilder als Ressource im BE hinzugeladen. Als "altImgResource.import.listNum = x" habe ich "x = 1" gewählt, da Bild 0 mein Header ist. Folgende Probleme tauchen auf:

Nach 4 Bildern ist Schluss mit dem Hinzufügen von Ressourcen?
Es wird nur das erste Bild geladen?

Kann mir jemand nen Tipp geben. Ich habe schon versucht die Liste mit fortlaufenden Nummern fortzuführen:

temp.customImageMenu.2.RO < temp.customImageMenu.2.NO
temp.customImageMenu.2.RO = 2
temp.customImageMenu.2.RO.altImgResource.import.listNum = 1

Das hatte aber keinen Effekt.

Danke und Gruss
Dom

dom ·

Ich gebe die Antwort mal selbst #angry# .

Man muss die jeweilige Ressource auch nur in den entsprechenden Menüpunkt laden. nicht alle gemeinsam in die Seite des main templates.

Mein Fehler, es ist einfach zu spät bzw. früh...

Danke trotzdem
Dom