1

WH: Menüs erstellen mit TypoScript

• In TYPO3 werden Menüs mittels TypoScript in den Templates definiert.

• Die Erstellung der Menüs übernimmt dann TYPO3 automatisch.

• Es macht dabei keinen Unterschied, ob es sich um ein grafisches oder ein Textmenü handelt.

2

WH: Menügenerierung

• Ausgangsbasis für die Menügenerierung ist der Seitenbaum, der die Struktur der Website widerspiegelt.

• TypoScript übernimmt aus dem Seitenbaum die Hierarchie und die Namen der Seiten und fügt sie an den richtigen Stellen in die generierten Menüs ein.

3

WH: Die drei wichtigsten Menüarten in TYPO3 sind:

• Textmenüs

• Grafische Menüs

• Layer-/Aufklapp-Menüs

4

WH: Beispiel HMENU

marks.NAVIGATION = HMENU

marks.NAVIGATION.1 = TMENU

marks.NAVIGATION.1.NO {

allWrap = <tr><td>|</td></tr>

ATagParams = class=ft10px333333

}

5

WH: Fortsetzung Beispiel

marks.NAVIGATION.1.ACT = 1marks.NAVIGATION.1.ACT {

allWrap = <tr><td><b>|</b></td></tr> ATagParams = class=ft10px333333}marks.NAVIGATION.2 = TMENUmarks.NAVIGATION.2.NO {

allWrap = <tr><td>&nbsp;&nbsp;|</td></tr> ATagParams = class=ft10px333333}

6

Grafische Menüs

• TYPO3 bietet auch Funktionen an, mit denen grafische Menüs automatisch erzeugt werden können.

• Bei Änderungen seitens der Redakteure werden die zum Aufbau der Menüs nötigen Bilder automatisch am Server neu berechnet.

• Das zeitraubende Erstellen von Grafiken in Bildverarbeitungsprogrammen für alle Menüpunkte entfällt dadurch.

7

Beispiel GMENU

marks.NAVIGATION= HMENUmarks.NAVIGATION.1 = GMENUmarks.NAVIGATION.1.NO {

backColor = #AAAAAAXY = 100, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 1110.offset = 6,1010.fontColor = #FFFFFF

}

8

Beispiel GMENU 2. Ebene

marks.NAVIGATION.2 = GMENUmarks.NAVIGATION.2.NO {

backColor = #CCCCCCXY = 100, 1410 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 910.offset = 3,810.niceText = 0

}

9

Einbinden einer Hintergrundgrafik

marks.NAVIGATION.1.NO {backColor = #AAAAAAXY = [10.w]+10, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 1110.offset = 4,1010.niceText = 15 = IMAGE5.file = fileadmin/menuhintergrund.gif

}

10

Rollover-Effekt

marks.NAVIGATION.1.RO < seite.10.marks.NAVIGATION.1.NO

marks.NAVIGATION.1.RO = 1marks.NAVIGATION.1.RO.5.file = fileadmin/menueover.gifmarks.NAVIGATION.1.ACT <

seite.10.marks.NAVIGATION.1.NOmarks.NAVIGATION.1.ACT = 1marks.NAVIGATION.1.ACT.5.file =

fileadmin/menueaktiv.gif

11

Textmenüs und Grafikmenüsgemeinsam

marks.MENU = HMENUmarks.MENU.1 = GMENUmarks.MENU.1.NO {

XY = [10.w]+10, 2010 = TEXT10.text.field = title10.fontFile = fileadmin/verdana.ttf10.fontSize = 11

}marks.MENU.2 = TMENUmarks.MENU.2.NO {

allWrap = <tr><td>|</td></tr>}

12

Layermenüs

• TypoScript kennt einen Objekttyp namens GMENU_LAYER, der es erlaubt, Aufklappmenüs bestehend aus DHTML-Layern zu konstruieren.

• Dazu wird die erste Hierarchieebene eines HMENU-Objektes als GMENU_LAYER definiert und die zweite entweder als TMENU oder GMENU.

• Die Funktionsweise und das Aussehen der Aufklappmenüs werden gänzlich in TypoScript definiert.

Vorführung

13

Beispiel

seite = PAGE

seite.typeNum = 0

seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php

seite.10 = HMENU

seite.10.1 = GMENU_LAYERS

seite.10.1 {

layerStyle = position:absolute;left:0px;top:20px;width:10px; //VISIBILITY:hidden;

xPosOffset =-10

lockPosition = x

expAll=1

14

Beispiel Teil 2

NO {backColor = #ccccccXY = [10.w]+30, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1210.offset = 5,15

}}

15

Beispiel Teil 3

seite.10.2 = GMENUseite.10.2.NO {

backColor = #ccccccXY = 140, 2010 = TEXT10.text.field = title10.offset = 5,1310.fontSize = 1110.fontFace = fileadmin/verdana.ttf

}

16

Mehrstufige Layermenüs

Dabei wird auch die zweite Hierarchieebene des Menüs alsGMENU_LAYER definiert:

seite.10.2 = GMENU_LAYERSseite.10.2 {layerStyle = position:absolute;left:0px;top:200px;width:10px; //

VISIBILITY:hidden;xPosOffset = -10yPosOffset = -30lockPosition = yexpAll = 1

}

17

Mehrstufige Layermenüs 2

Die dritte Ebene des HMENU-Objektes wird wieder als normales GMENU definiert.

seite.10.3 = GMENUseite.10.3.NO {

backColor = |*| #cccccc || #aaaaaa |*|XY = 120, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1010.offset = 5,13

}

18

Sitemaps

• Sitemaps, die Übersichten über die Struktur von Websites liefern, sind eine spezielle Menüform.

• TYPO3 stellt fertige Content-Elemente für diesen Zweck zur Verfügung.

• Beim Einfügen neuer Content-Elemente wird ein entsprechender Typ im Bereich »Spezielle Elemente« vorgehalten.

Vorführung

19

Sitemaps Formatierung

• Das Aussehen der Sitemap können Sie beeinflussen, indem Sie den Constant-Editor der Template-Tools bemühen.

• In der Kategorie Content gibt es einen eigenen Abschnitt für die Content-Elemente Menü und Sitemap.

Vorführung

20

Arbeiten mit Frames

• Der Aufbau des TypoScript-Codes zur Frame-Definition ist dem HTML-Code sehr ähnlich.

• TYPO3 unterscheidet Seiten, die als Behälter für weitere Seiten dienen (Frameset und Frames in HTML), mittels der Eigenschaft typeNum.

• In den bisherigen Beispielen musste typeNum jeweils auf 0 gesetzt werden, da bei framelosen Seiten nur ein Seitentyp vorkommt.

21

Beispiel Frames

zeilenframeset = PAGEzeilenframeset.typeNum = 0header = PAGEheader.typeNum = 1main = PAGEmain.typeNum = 3blank = PAGEblank.typeNum = 4bottom = PAGEbottom.typeNum = 5

22

Beispiel Frames 2

zeilenframeset.frameSet {rows = 104,*,29params = border="0" frameborder="no" framespacing="0"1 = FRAME1.obj = header1.params = noresize scrolling="no“

2 = FRAMESET2.params = noresize scrolling="no"2.cols = 783,*

23

Beispiel Frames 3

2 {1 = FRAME1.obj = main2 = FRAME2.obj = blank

}3 = FRAME3.obj = bottom3.params = noresize scrolling="no"

}