Zum Inhalt springen

grafisches Menu - HowTo?

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

Tags: Frage

siggi ·

Hallo,

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

Nun möchte ich aber ein Nav-Menu erstellen, daß auf mit Photoshop erstellten Nav-Buttons basiert und über einen MouseOver-Effekt verfügt. Da die Button-Namen schon in die Grafik mit eingearbeitet sind, benötige ich keinen Button-Text aus Typo3.

Wie kann ich ein solches Menü - also nur über Images - in Typo3 umsetzen? Die Aufklappfunktion zum 2. MenuLevel soll funktionieren.
Und wie kann ich ohne textbasierte Menupunkte den einzelnen Buttons die entsprechenden Seiten zuordnen?

Ist es nötig dafür ein extra Java- oder PHP-Skript zu schreiben oder geht es komfortabler in Typo3?

Das Mittel "GMenu" scheint eher nur auf Farbänderungen abzuzielen und scheint nicht nutzbar, wenn man bei der Typo-Installation auf ImageMagick verzichtet hat.

Habe leider auch keine entsprechenden Beispiele gefunden. Ist ein solches Menu vielleicht nicht mit einem CMS vereinbar?

Vielen Dank schon mal im Voraus für Eure Mühe.

Gruß Siggi

magold ·

Hi, könnte mir da spontan einen workaround vorstellen: Einfach ein Textmenü erstellen lassen und als wrap Deine IMG-Tags einfügen. Großer Nachteil: Die Bilder müssen exakt so heißen wie die Menüpunkte, denn die Informationen von typo3 aus dem Seitenbaum benutzt Du für die SRC-Angabe und mouseover-Eigenschaften. Die Mouseover-Funktion integrierst Du einfach in Dein Template.
Echte Typo3ler graust es wahrscheinlich vor dieser Lösung... 😃

jweiland ·

Siggi,

es geht über einen kleinen Trick. Verwende als Textfeld nicht "title" sondern ein Feld was ansonsten leer ist, z.B. subtitle oder nav_title. Dann wird kein Text auf den Button gerendert.

....
10 = TEXT
10.text.field = subtitle
...

Der Sinn eines CMS ist zwar, dass die Menüs dynamisch generiert werden, d.h. wenn sich der Seitentitel ändert soll sich auch der Menübutton ändern. Aber wenn es nur wirklich "statische" Buttons sind, klappt es mit dem o.a. Trick.

Jochen Weiland

siggi ·

Danke für die Anregungen. Insbesondere den Trick mit dem Pseudo-"title" kann ich gut gebrauchen.

Ein Problem bleibt jedoch bestehen. Die Grafik der Buttons ist nicht gleich, sondern jeder Menupunkt besitzt eine eigene Buttongrafik. Typo3 muß also in der Menu-Konstruktion jedem Menupunkt auch den entsprechenden spezifischen Button zuordnen. Hier kann ich also nicht mit pauschalen Wraps (<td background="fileadmin/images/button.gif"> | </td>) arbeiten. Wie könnte hier eine Lösung aussehen?

Mit einem weiteren Problem stehe ich gerade auf der Leitung. Während mit TMENU alles funktioniert, erreiche ich mit GMENU keine Anzeige der Navigation. Der Punkt ist, daß ich auf:

navmenu.20 = TEXT
navmenu.20.text.field = title

keine Anzeige in der Website erhalte. Ich komme einfach nicht auf den Grund. Vielleicht könnt Ihr helfen.

Gruß Siggi

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