1

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

Beispiel eines TYPO3-Menüs

3

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.

4

Gestalt der Menüs

• Funktionsweise und Aussehen der Menüs können dabei über vielfältige Einstellungsmöglichkeiten in TypoScript beeinflusst werden.

• Soll eine Seite nicht in den Menüs aufscheinen, dann muss dies entweder über den Seitentyp gekennzeichnet werden, oder das Menüskript wird entsprechend angepasst.

5

Die drei wichtigsten Menüarten in TYPO3 sind:

• Textmenüs

• Grafische Menüs

• Layer-/Aufklapp-Menüs

6

HMENU

• Das grundlegende Objekt für Menüskripte ist HMENU.

• Der Name steht für “Hierarchisches Menü”.

• Das Objekt bildet die Hierarchieebenen des Seitenbaumes ab und definiert deren Eigenschaften.

7

Beispiel HMENU

marks.NAVIGATION = HMENU

marks.NAVIGATION.1 = TMENU

marks.NAVIGATION.1.NO {

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

beforeImg = fileadmin/img/pfeilchengrau.gif

beforeROImg = fileadmin/img/pfeilchengruen.gif

RO = 1

}

8

Die fünf wichtigsten Zustände von Menüeinträgen:

• Der normale Zustand eines Menüeintrages wird mit NO abgekürzt.

• Der Rollover Zustand wird mit RO abgekürzt. Er beschreibt das Aussehen des Menüeintrages, wenn sich der Mauszeiger darüber befindet.

• ACT ist die Abkürzung für den aktuellen Verlauf. Das sind der Menüeintrag, der aktuell ausgewählt ist, und die in der Hierachie über ihm liegenden Einträge (»Pfad zu Home«).

9

Die fünf wichtigsten Zustände von Menüeinträgen: (2)

• CUR bezeichnet den Zustand der aktuellen Seite, im Gegensatz zu ACT jedoch nur die Seite selbst.

• IFSUB definiert das Aussehen eines Menüeintrages, wenn dieser mindestens eine Unterseite hat. Wenn sich weitere Menüeinträge unterhalb eines Eintrages befinden, dann kann dadurch die Darstellung abweichend definiert werden.

10

Fortsetzung Beispiel

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

allWrap = <tr><td>|</td></tr>beforeImg = fileadmin/img/pfeilchenrot.gif

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

allWrap = <tr><td>|</td></tr>beforeROImg = fileadmin/img/pfeilchengruen.gifRO = 1

}

11

Die Eigenschaften des HMENU-Objektes:

• entryLevel

Gibt den Einstiegslevel für ein Menüobjekt an. Es ist dies die Ebene im Seitenbaum, ab der dieses Menü die Einträge darstellt. Wird diese Eigenschaft nicht gesetzt, dann hat sie den Standardwert 0: Die Wurzel des Seitenbaumes ist demnach die Einstiegsebene. Wird der entryLevel auf 1 gesetzt, dann stellt das Menüobjekt die Seiten der zweiten Ebene dar.

12

Eigenschaft special

• Normalerweise bildet ein Menüobjekt die Hierarchie des Seitenbaumes ab.

• Soll der Menüinhalt davon abweichen, dann kann dies durch Definition der special-Eigenschaft geschehen. Damit werden Menüs zu speziellen Seiten erzeugt.

• special kann die Werte directory, list, updated, rootline und keywords annehmen.

13

directory, list

• Mit directory kann ein Menü aufgebaut werden, das nur aus bestimmten Seiten besteht.

• Der Wert list unterscheidet sich von directory dadurch, dass das Menü von der unter special.value angegebenen Liste von Seiten gebildet wird, die Unterseiten jedoch nicht einbezogen werden.

14

Beispiel

marks.MENU_UNTEN = HMENU

marks.MENU_UNTEN.special = directory

marks.MENU_UNTEN.special.value = 8

marks.MENU_UNTEN.1 = TMENU

marks.MENU_UNTEN.1.NO {

before = &nbsp;

after = &nbsp; | |*| &nbsp; | |*| &nbsp;

}

15

updated

• Mit updated können Menüs der zuletzt geänderten Seiten automatisch erzeugt werden.

16

Beispiel

marks.NEU.10 = HMENU

marks.NEU.10.special = updated

marks.NEU.10.special.value = 2, 3

marks.NEU.10.special {

mode = tstamp

maxAge = 3600*24*3

limit = 5

}

17

rootline

• Der Wert rootline ist dafür vorgesehen, klickbare Pfadanzeigen zu erzeugen.(siehe Beispiel Cyberhouse-Seite)

18

Beispiel

marks.PFAD = HMENU

marks.PFAD {

special = rootline

special.range = 0 | -1

1 = TMENU

1.NO.allWrap = | &nbsp; / &nbsp; |*| | &nbsp; / &nbsp; |*| |

}

19

keyword

• keyword kann verwendet werden, um Seiten ins Menü einzubinden, die bestimmte Schlüsselwörter enthalten.

• Diese werden über .setKeywords gesetzt und können entweder als Liste angegeben werden, oder es wird eine Seite definiert, in der die Schlüsselwörter enthalten sind.

20

minItems, maxItems

• Mit minItems kann die Mindestanzahl der Menüeinträge bestimmt werden. Sind nicht genügend Seiten vorhanden, dann werden »…«-Einträge mit Links auf die aktuelle Seite erzeugt.

• Mit maxItems kann die Maximalanzahl der Menüeinträge festgelegt werden. Sind mehr Seiten vorhanden, dann werden sie bei der Menüerzeugung ignoriert.

21

Beispiel

marks.MENU = HMENUmarks.MENU.minItems = 6marks.MENU.maxItems = 6marks.MENU.1 = TMENUmarks.MENU.1.wrap = <td class="fliesstext"> | </td>marks.MENU.1.NO {

before = &nbsp;after = &nbsp; | |*| &nbsp; | |*| &nbsp;

}

22

Weitere Eigenschaften von HMENU

• ExcludeUidList

In dieser Eigenschaft kann eine Liste von Seiten über die Seiten-ID angegeben werden, die nicht im Menü erscheinen sollen.

• begin

Diese Eigenschaft bestimmt den ersten Menüeintrag. Mit begin = 4 werden die ersten drei Menüeinträge nicht angezeigt.

23

Textmenüs

• In den Beispielen im vorangegangenen Beispielen wurde das Objekt TMENU bereits an einigen Stellen verwendet.

• Es definiert ein Textmenü, das standardmäßig die Seitentitel als Menüeinträge aufnimmt.

24

Einfaches Beispiel

seite.10 = HMENU

seite.10.1 = TMENU

seite.10.1.NO.allWrap = | <BR>

25

Weiteres Beispiel

seite.10 = HMENUseite.10.1 = TMENUseite.10.1 {

expAll = 1NO.allWrap = <div class=”text”> | </div>

}seite.10.2 = TMENUseite.10.2.NO {

allWrap = <div class=”textklein”> | </div>}

26

Eigenschaften von Textmenüs

• allWrap umschließt den gesamten Menüeintrag.• before gibt an, was vor dem Menüeintrag

angezeigt werden soll.• beforeImg bezeichnet eine Grafikdatei, die vor

dem Menüeintrag angezeigt wird. Es ist besser, diese Eigenschaft zu verwenden, als die Grafik über ein <img>-Tag in der before-Eigenschaft einzubinden, da dann die automatischen Rollover-Funktionen verwendet werden können.

27

Eigenschaften von Textmenüs (2)

• beforeROImg benennt die bei Rollover angezeigte Grafik. Dies funktioniert nur wenn, die RO-Eigenschaft auf 1 gesetzt wird.

• beforeWrap umschließt den before-Code.• linkWrap umschließt das <A>-Tag der

Menüeinträge.• Mit AtagParams können zusätzliche Parameter

zum Link-Tag angegeben werden.• after ist analog zu before.

28

Beispiel mit mehreren Eigenschaften

seite.10 = HMENU

seite.10.1 = TMENU

seite.10.1 {

NO.allWrap = <p> | </p>

NO.beforeImg = fileadmin/img/pfeilchen.gif

NO.AtagParams = style=none

NO.after = &nbsp;

}

29

Abschlussbeispiel (1)

marks.MENUE = HMENUmarks.MENUE.1 = TMENUmarks.MENUE.1 {

NO {allWrap = <tr height="20"><td class="navi">|</td></tr>ATagParams=class="navi"

}ACT = 1ACT {allWrap = <tr height="20"><td class="navi_active">|</td></tr>ATagParams=class="navi_active"}

}

30

Abschlussbeispiel (2)

marks.MENUE.2 = TMENUmarks.MENUE.2 {

NO {allWrap = <tr height="20"><td class="navi">|</td></tr>ATagParams=class="navi"beforeImg = fileadmin/img/pfeilchentrans.gifbeforeROImg = fileadmin/img/pfeilchen.gifRO = 1}ACT = 1ACT {allWrap = <tr height="20"><td class="navi_active">|</td></tr>ATagParams=class="navi_active"beforeImg = fileadmin/img/pfeilchen.gif}

}