Untermenü

TYPO3 Chat hosted by kj187kj.

Join now


Chat about what's on your mind. More about public chats.

Sunsite SourceForge.net

Statistik
Tutorials Gesamt:
56
Tutorials Hidden:
1
Kommentare:
499

Bücher zum Thema

Links / Friends
» typo3.org
» T3N Magazin
» CSS Tutorials
» TYPO3 SEO
» TYPO3 Blog



 

Grafisches Menü mit statischen Buttons und Effekten realisieren


Tutorial abonnieren:
Author:
CodeFlatter (René)
Author E-Mail:
Eingetragen:
27.08.2005 - 21:42

Quelle:
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:

   0: wrap = |
Hier koennen Sie sich den Quellcode kopieren.
 
 
 
Seite: 1