wh: menüs erstellen mit typoscript
DESCRIPTION
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. WH: Menügenerierung. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/1.jpg)
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.
![Page 2: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/2.jpg)
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.
![Page 3: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/3.jpg)
3
WH: Die drei wichtigsten Menüarten in TYPO3 sind:
• Textmenüs
• Grafische Menüs
• Layer-/Aufklapp-Menüs
![Page 4: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/4.jpg)
4
WH: Beispiel HMENU
marks.NAVIGATION = HMENU
marks.NAVIGATION.1 = TMENU
marks.NAVIGATION.1.NO {
allWrap = <tr><td>|</td></tr>
ATagParams = class=ft10px333333
}
![Page 5: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/5.jpg)
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> |</td></tr> ATagParams = class=ft10px333333}
![Page 6: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/6.jpg)
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.
![Page 7: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/7.jpg)
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
}
![Page 8: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/8.jpg)
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
}
![Page 9: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/9.jpg)
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
}
![Page 10: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/10.jpg)
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
![Page 11: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/11.jpg)
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>}
![Page 12: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/12.jpg)
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
![Page 13: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/13.jpg)
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
![Page 14: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/14.jpg)
14
Beispiel Teil 2
NO {backColor = #ccccccXY = [10.w]+30, 2010 = TEXT10.text.field = title10.fontFace = fileadmin/verdana.ttf10.fontSize = 1210.offset = 5,15
}}
![Page 15: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/15.jpg)
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
}
![Page 16: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/16.jpg)
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
}
![Page 17: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/17.jpg)
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
}
![Page 18: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/18.jpg)
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
![Page 19: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/19.jpg)
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
![Page 20: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/20.jpg)
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.
![Page 21: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/21.jpg)
21
Beispiel Frames
zeilenframeset = PAGEzeilenframeset.typeNum = 0header = PAGEheader.typeNum = 1main = PAGEmain.typeNum = 3blank = PAGEblank.typeNum = 4bottom = PAGEbottom.typeNum = 5
![Page 22: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/22.jpg)
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,*
![Page 23: WH: Menüs erstellen mit TypoScript](https://reader030.vdocuments.pub/reader030/viewer/2022032709/568131d3550346895d983d1e/html5/thumbnails/23.jpg)
23
Beispiel Frames 3
2 {1 = FRAME1.obj = main2 = FRAME2.obj = blank
}3 = FRAME3.obj = bottom3.params = noresize scrolling="no"
}