Grafisches Menü mit statischen Buttons und Effekten realisieren

Author:

CodeFlatter (René)

Author E-Mail:

workplace(at)gmx.net

Eingetragen:

27.08.2005 - 21:42

Quelle:

http://www.rene.futureboard.de...

Klicks:

3198

Dieses kleine Tutorial soll Einsteigern helfen, grafische Menüs mit statischem Buttonhintergrund aber dynamischer Beschriftung zu realisieren. Die notwendige Buttonbreite wird dabei automatisch errechnet. Auch kleine Effekte sind schnell umsetzbar.
Am Ende des Tutorial findest Du einen Link, wo alle notwendigen/verwendeten Dateien bezogen werden können.

Beginnen wir mit einem horizontalen Menü.
So könnte es mal aussehen:

oder auch selektiert

Für die spätere Webseite wird ein Menü-Marker in der Vorlage (Template) benötigt.
Die Vorlage wird dann vom Setup gezogen.

Für das Beispiel kann diese Vorlage verwendet werden, erzeuge einfach die entsprechende Datei im angegebenen Verzeichnis.

fileadmin/templates/vorlage.tmpl.html

...

###MENU_HEAD###

Damit die Datei im Browser getestet werden kann, habe ich eine HTML-Gerüst um die Tabelle gelegt.
Das Setup wird aber nacher nur den Sub-Part "Document" aus der Datei verwenden.

Im Typo3 kann nun eine neue Seite erstellt werden.
Innerhalb dieser Seite muss jetzt jeweils eine Seite pro Menü-Button erstellt werden.
Dabei sollte sich in etwa folgende Struktur ergeben (bei drei Buttons):

Die Hauptseite der neuen Struktur sollte jetzt ein eigenes Template bekommen. Befindet sich die neue Struktur in einem Baum, in dem bereits ein Template existiert - so kann mit
"Click here to create an extension template."
das bestehende Template erweitert werden.
Für den anderen Fall muß mit dem Button
"Create template for a new site" ein neues template erstellt werden.

Ins Setup des Templates kommt zu Begin folgender
TypoScript-Inhalt:

   0: 
   1: seite = PAGE 
   2: seite {
   3:   typeNum = 0
   4:    
   5:   bodyTag = <body bgcolor="#000000" text="#FFFFFF">
   6:   meta.AUTHOR = Name des Autor
   7:   meta.DESCRIPTION = Hier eine Beschreibung einfügen
   8:    
   9:   10 = TEMPLATE
  10:   10.template = FILE
  11:   10.template.file = fileadmin/templates/vorlage.tmpl.html
  12:   10.workOnSubpart = DOCUMENT
  13:   10.marks {
  14:      
  15:     MENU_HEAD = HMENU
  16:     MENU_HEAD.special = directory
  17:     MENU_HEAD.special.value = 4
  18:      
  19:     MENU_HEAD.1 = GMENU
  20:     MENU_HEAD.1.NO = 1
  21:     MENU_HEAD.1.NO {
  22:        
  23:       XY = [10.w] + 20, 28
  24:       backColor = white
  25:        
  26:       4 = IMAGE
  27:       4.file = fileadmin/buttons/middle.PNG
  28:       4.tile = 10
  29:        
  30:       5 = IMAGE
  31:       5.file = fileadmin/buttons/left.PNG
  32:        
  33:       6 = IMAGE
  34:       6.file = fileadmin/buttons/right.PNG
  35:       6.align = r
  36:        
  37:       10 = TEXT
  38:       10.text.field = title
  39:       10.fontSize = 10  
  40:       10.offset = 0, 18
  41:       10.align = center
  42:       10.niceText = 1
  43:     }
  44:   }
  45: }

Hier koennen Sie sich den Quellcode kopieren.

Ersetze die 4 aus der Zeile MENU_HEAD.special.value = 4 mit der ID Deiner Hauptseite des Menüs (erste Seite der neuen Struktur)

Speichern nicht vergessen! ;)

Dieses Script ersetzt den Marker ###MENU_HEAD### aus der Vorlage mit dem Ergebnis das Scripts.

10.workOnSubpart = DOCUMENT
Sorgt dafür, das nur der Bereich ###DOCUMENT### aus der Vorlage geladen wird, der Rest bleibt unbeachtet.

10.marks
Ab hier begint der Austausch der Marker.

XY = [10.w] + 20, 28
Hier wird vereinbart, das sich die Buttonbreite aus der Textbreite (10.w = vereinbarter Text aus 10, w = width) plus 20 Pixel ergibt, die Höhe ist 28 Pixel

4 = IMAGE
(wiederholt sich für jeden Button)
Hier ist gut zu erkennen, das drei Images generiert werden, wobei je ein statisches Bild geladen wird.
Der Text wird dann über den Button gezeichnet.

Hier die drei Bilder, die durch den Scriptcode zu Buttons und dann zu einer Menüleiste zusammengesetzt werden:

linker

mittlerer

und rechter Buttonteil

Die Bilder müssen also im Pfad
fileadmin/buttons/left.PNG
fileadmin/buttons/middle.PNG
fileadmin/buttons/right.PNG
bereitgestellt werden und sollten den linken, mittleren und rechten Teil des Button enthalten.
Der mittlere Teil wird dann einfach so oft aneinander kopiert bis sich die notwendige Breite des Button ergeben hat, links und rechts wird dann nur noch angefügt - fertig ist der Button...
Nun kann schon mal getestet werden!

Das Ergebnis sollte etwa so aussehen:

Gut, jetzt haben wir die Menüleiste, viel macht sie aber nicht her - es fehlt noch der mouseOver-Effekt.
Der kann jetzt durch Erweitern des Scriptes hinzugefügt werden:
Füge nach dem hier gekürzten Block

   0: #...
   1: MENU_HEAD.1.NO = 1
   2: MENU_HEAD.1.NO {
   3:   	#...
   4: }
   5: #---> HIER EINFÜGEN

Hier koennen Sie sich den Quellcode kopieren.

den folgenden Block direkt nach der schließenden Klammer ein

   0: 
   1: MENU_HEAD.1.RO = 1
   2: MENU_HEAD.1.RO {
   3:    
   4:   XY = [10.w] + 20, 28
   5:   backColor = olive
   6:    
   7:   4 = IMAGE
   8:   4.file = fileadmin/buttons/middle_active.PNG
   9:   4.tile = 10
  10:    
  11:   5 = IMAGE
  12:   5.file = fileadmin/buttons/left_active.PNG
  13:    
  14:   6 = IMAGE
  15:   6.file = fileadmin/buttons/right_active.PNG
  16:   6.align = r
  17:    
  18:   10 = TEXT
  19:   10.text.field = title
  20:   10.fontSize = 10  
  21:   10.offset = 0, 18
  22:   10.align = center
  23:   10.niceText = 1
  24: }

Hier koennen Sie sich den Quellcode kopieren.

Das Geheimnis ist also schnell gelüftet, wir definieren einfach auch noch den Code für den Hovered-Button (RO), somit bekommen wir zwei Grafiken je Button generiert.

Wieder die Grafiken:

linker aktiver

mittlerer aktiver

und rechter aktiver Buttonteil

Das Ergebnis sollte etwa so aussehen:

Oh - da ist ja noch ein kleiner Schatten unter dem aktiven Button!
Den "zaubern" wir auch noch rein.

Im Block

   0: 
   1: MENU_HEAD.1.RO {
   2:       # ...
   3:    #--> HIER EINFÜGEN
   4: }

Hier koennen Sie sich den Quellcode kopieren.

wird bei dem Pfeil noch um folgendes ergänzt;

   0: 
   1: 5 < .10
   2: 5.fontColor = #909090
   3: 5.align = center
   4: 5.niceText = 1
   5: 5.offset = 1, 20

Hier koennen Sie sich den Quellcode kopieren.

Das sollte es aber jetzt gewesen sein :)

Jetzt kann durch einiges "rumspielen" noch einiges Ausprobiert werden, so wäre z.B. je eine andere fontColor möglich usw.
Achte aber immer darauf, NO und RO ergeben jeweils einen Button!

Alles gut und schön, Du hättest das Menü gerne vertikal?

Dann muß folgendes ergänzt bzw. ersetzt werden

   0: 
   1: MENU_HEAD.1.NO {
   2:   #-->   DAS FOLGENDE EINFÜGEN BZW. ERSETZEN
   3:   wrap = |
   4:         #XY = [10.w]+20,28
   5:   XY = 120,28
   6: }

Hier koennen Sie sich den Quellcode kopieren.

das gleiche auch bei (RO!)

   0: 
   1: MENU_HEAD.1.RO {
   2:   #-->   DAS FOLGENDE EINFÜGEN BZW. ERSETZEN
   3:   wrap = |
   4:         #XY = [10.w]+20,28
   5:   XY=120,28
   6: }

Hier koennen Sie sich den Quellcode kopieren.

und das Ergebnis sollte etwa so aussehen:

Wenn man jetzt noch an der Breite und an der Ausrichtung dreht (10.align = center), kann man sicher schon zufrieden sein.

Das wars, ich hoffe der eine oder andere hatte eine kleine Hilfe.

Greez!

Ergebnis:

Zum Eingabeformular

Susanne Müller

01.05.2007 12:45 Uhr

Hallo,
danke für das Tutorial, soweit funktionierts, nur möchte ich für jeden einzelnen Menüpunkt einen unterschiedlichen Button einfügen. (im grafischen Menü)
Danke für jeden Hinweis!
Susanne

Basti

02.11.2006 15:50 Uhr

respect!

klaus

19.05.2006 19:22 Uhr

ich verstehe es nicht :(

Mario

19.05.2006 19:22 Uhr

Hallo,
möchte jedem grafischen Button eine andere Hintergrundfarbe in Abhängigkeit von der ID der Seite geben. Bsp: Produkt1 = blauer Hintergrund
Produkt2 = roter HG
Produkt3 = gelber HG
Wie kann man das in Typoscript realisieren?
mfg Mario

Patrik

19.05.2006 19:21 Uhr

Braucht man für dieses Skript irgendwelche installierten Extensions? zB Gifbuilder?

Danke, Patrik

Franz Bachinger

19.05.2006 19:21 Uhr

Ein tolles Tutorial, sehr einfach und logisch aufgebaut. Meiner Ansicht fehlt beim vertikalen Menü in der Zeile "wrap = |" das Zeilenumbruchzeichen "
". Der Internetexplorer benötigt es, Firefox ist es egal. Also müßte die Zeile so lauteten: