WH: Menüs erstellen mit TypoScript

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 = 1 marks.NAVIGATION.1.ACT { allWrap = <tr><td><b>|</b></td></tr> ATagParams = class=ft10px333333 } marks.NAVIGATION.2 = TMENU marks.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= HMENU marks.NAVIGATION.1 = GMENU marks.NAVIGATION.1.NO { backColor = #AAAAAA XY = 100, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 10.offset = 6,10 10.fontColor = #FFFFFF }

8. Beispiel GMENU 2. Ebene marks.NAVIGATION.2 = GMENU marks.NAVIGATION.2.NO { backColor = #CCCCCC XY = 100, 14 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 9 10.offset = 3,8 10.niceText = 0 }

9. Einbinden einer Hintergrundgrafik marks.NAVIGATION.1.NO { backColor = #AAAAAA XY = [10.w]+10, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 10.offset = 4,10 10.niceText = 1 5 = IMAGE 5.file = fileadmin/menuhintergrund.gif }

10. Rollover-Effekt marks.NAVIGATION.1.RO < seite.10.marks.NAVIGATION.1.NO marks.NAVIGATION.1.RO = 1 marks.NAVIGATION.1.RO.5.file = fileadmin/menueover.gif marks.NAVIGATION.1.ACT < seite.10.marks.NAVIGATION.1.NO marks.NAVIGATION.1.ACT = 1 marks.NAVIGATION.1.ACT.5.file = fileadmin/menueaktiv.gif

11. Textmenüs und Grafikmenüsgemeinsam marks.MENU = HMENU marks.MENU.1 = GMENU marks.MENU.1.NO { XY = [10.w]+10, 20 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/verdana.ttf 10.fontSize = 11 } marks.MENU.2 = TMENU marks.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 = #cccccc XY = [10.w]+30, 20 10 = TEXT 10.text.field = title 10.fontFace = fileadmin/verdana.ttf 10.fontSize = 12 10.offset = 5,15 } }

15. Beispiel Teil 3 seite.10.2 = GMENU seite.10.2.NO { backColor = #cccccc XY = 140, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.fontSize = 11 10.fontFace = fileadmin/verdana.ttf }

16. Mehrstufige Layermenüs Dabei wird auch die zweite Hierarchieebene des Menüs als GMENU_LAYER definiert: seite.10.2 = GMENU_LAYERS seite.10.2 { layerStyle = position:absolute;left:0px;top:200px;width:10px; // VISIBILITY:hidden; xPosOffset = -10 yPosOffset = -30 lockPosition = y expAll = 1 }

17. Mehrstufige Layermenüs 2 Die dritte Ebene des HMENU-Objektes wird wieder als normales GMENU definiert. seite.10.3 = GMENU seite.10.3.NO { backColor = |*| #cccccc || #aaaaaa |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.fontFace = fileadmin/verdana.ttf 10.fontSize = 10 10.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 = PAGE zeilenframeset.typeNum = 0 header = PAGE header.typeNum = 1 main = PAGE main.typeNum = 3 blank = PAGE blank.typeNum = 4 bottom = PAGE bottom.typeNum = 5

22. Beispiel Frames 2 zeilenframeset.frameSet { rows = 104,*,29 params = border="0" frameborder="no" framespacing="0" 1 = FRAME 1.obj = header 1.params = noresize scrolling="no“ 2 = FRAMESET 2.params = noresize scrolling="no" 2.cols = 783,*

23. Beispiel Frames 3 2 { 1 = FRAME 1.obj = main 2 = FRAME 2.obj = blank } 3 = FRAME 3.obj = bottom 3.params = noresize scrolling="no" }