• Save
TYPO3: Menüs Mit Typoscript
Upcoming SlideShare
Loading in...5
×
 

TYPO3: Menüs Mit Typoscript

on

  • 11,032 views

Menüs mit TypoScript erstellen auf TYPO3-Webseiten. Grundlagen.

Menüs mit TypoScript erstellen auf TYPO3-Webseiten. Grundlagen.

Statistics

Views

Total Views
11,032
Views on SlideShare
10,481
Embed Views
551

Actions

Likes
0
Downloads
0
Comments
0

6 Embeds 551

http://www.in2code.de 532
http://relaunch.in2code.de 9
http://krautsock.posterous.com 5
http://ingop.de 3
http://posterous.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TYPO3: Menüs Mit Typoscript TYPO3: Menüs Mit Typoscript Presentation Transcript

  • Menüs mit TypoScript
  • Anforderungen
    • Dynamische Änderungen
      • Geänderte Seitentitel automatisch im Menü
      • Gelöschte und versteckte Seiten automatisch ausgeblendet
      • Seiten abhängig von der Berechtigung des Users
    • Sauberer HTML-Code
      • Darstellung i.d.R. als ungeordnete Liste
      • Beliebiger HTML-Code möglich
      • Darstellung beliebig vieler Elemente
      • Flexibilität
  • Einfaches Menue
    • # Menü wird definiert
    • # HMENU => hierarchisches Menü, es kann mehrere Ebenen geben
    • temp.topnav = HMENU
    • temp.topnav {
    • # Erste Ebene soll ein Textmenü sein
    • 1 = TMENU
    • 1 {
    • # Der normale Zustand soll angezeigt werden
    • NO = 1
    • }
    • }
  • Menue als ungeordnete Liste
    • # Menü wird definiert
    • # HMENU => hierarchisches Menü, es kann mehrere Ebenen geben
    • temp.topnav = HMENU
    • temp.topnav {
    • # Erste Ebene soll ein Textmenü sein
    • 1 = TMENU
    • 1 {
    • # Der normale Zustand soll angezeigt werden
    • NO = 1
    • # als Listenelement wrappen
    • NO.wrapItemAndSub = <li>|</li>
    • }
    • # Ganz außenrum ein <ul>
    • wrap = <ul>|</ul>
    • }
  • Menue als ungeordnete Liste
    • Ergebnis:
  • Den aktiven Menuepunkt hervorheben
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • # Der aktive Menübutton soll eine id &quot;act&quot; bekommen
    • # Aktiven Zustand einschalten
    • ACT = 1
    • # Der aktive Zustand erhält einen anderen Wrap
    • ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Den aktiven Menuepunkt hervorheben
    • Ergebnis:
  • Vereinfachung des Codes
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • # Für ACT die gleichen Einstellungen verwenden wie
    • # für NO
    • ACT < .NO
    • }
    • wrap = <ul>|</ul>
    • }
  • Title im A-Tag setzen
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • # Title für den A-Tag setzen
    • NO.ATagTitle.field = abstract // nav_title // title
    • # Für ACT die gleichen Einstellungen verwenden wie für NO
    • # überschreiben von wrapItemAndSub
    • ACT < .NO
    • ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Title im A-Tag setzen
    • Ergebnis:
  • Verschiedene Zustaende von Menuepunkten
    • NO Standardzustand
    • CUR dieser Menüpunkt wird gerade angezeigt
    • ACT dieser Menüpunkt liegt innerhalb der aktuellen Rootline
    • IFSUB / ACTIFSUB / CURIFSUB dieser Menüpunkt hat Unterpunkte
    • Weitere Zustände sind in der TSRef zu finden:
    • http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2531260
  • Option-Split
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • # Bestimmte Elemente anders formatieren
    • # Bereiche sind durch |*| getrennt
    • # Beginn, Mitte, Ende
    • NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> |*| <li>|</li> |*| <li class=&quot;last&quot;>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Option-Split
    • Ergebnis:
  • Option-Split II
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • # Bestimmte Elemente anders formatieren
    • # Bereiche sind durch || einzeln voneinander getrennt
    • NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> ||
    • <li class=&quot;second&quot;>|</li> ||
    • <li class=&quot;third&quot;>|</li> ||
    • <li class=&quot;fourth&quot;>|</li> ||
    • <li class=&quot;fifth&quot;>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Option-Split II
    • Ergebnis:
  • Eine zweite Menuebene
    • temp.topnav = HMENU
    • temp.topnav {
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • }
    • # Zweite Menüebene mit allen Eigenschaften wie die erste
    • 2 < .1
    • # Braucht nochmal ein ul als Wrap, sobald Unterpunkte
    • # vorhanden sind
    • 2.stdWrap.wrap = <ul>|</ul>
    • 2.stdWrap.required = 1
    • wrap = <ul>|</ul>
    • }
  • Eine zweite Menuebene
    • Ergebnis:
  • Weitere Informationen
    • TMENU
    • Eigenschaften für ganze Menüebenen
    • http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828
    • TMENUITEM
    • Eigenschaften für einzelne Menüpunkte
    • http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828
  • Besonderheiten: Definierter Startpunkt
    • temp.topnav = HMENU
    • temp.topnav {
    • # Menü ab einem bestimmten Startpunkt
    • # z.B. bei Footer- oder Service-Navigationen häufig eingesetzt
    • special = directory
    • special.value = {$topnavStartingPoint}
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Besonderheiten: Erst ab X. Ebene anzeigen
    • temp.topnav = HMENU
    • temp.topnav {
    • # Das Menü wird erst ab der ersten Ebene angezeigt
    • entryLevel = 1
    • 1 = TMENU
    • 1 {
    • NO = 1
    • NO.wrapItemAndSub = <li>|</li>
    • }
    • wrap = <ul>|</ul>
    • }
  • Besonderheiten: Breadcrumb
    • temp.topnav = HMENU
    • temp.topnav {
    • # typ &quot;rootline&quot; zeigt den Pfad von der aktuellen Seite bis
    • # zur Root-Seite an
    • special = rootline
    • # 1. bis 8. Ebene
    • special.range = 1 | 8
    • 1 = TMENU
    • 1 {
    • NO = 1
    • # Durch Pfeile (&raquo;) voneinander getrennt
    • # Mit Option Split erreichen wir, dass nach dem letzten
    • # Menüpunkt kein Pfeil mehr kommt
    • NO.wrapItemAndSub = |&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*|
    • |&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*| |
    • }
    • wrap = <div id=&quot;breadcrumb&quot;>|</div>
    • }
  • Besonderheiten: Breadcrumb
    • Ergebnis:
  • Graphische Menues: Das Ziel
    • Unser Ziel:
    • HTML:
    • <ul>
    • <li>
    • <a style=&quot;width: 123px; background-image: url(…);&quot;>
    • Menüpunkt1
    • </a>
    • </li>
    • </ul>
    • CSS:
    • ul li a {
    • display: block;
    • text-indent: -999em;
    • }
  • Graphische Menues: Das Grundgeruest
    • temp.navigation = HMENU
    • temp.navigation {
    • 1 = TMENU
    • 1 {
    • wrap = <ul>|</ul>
    • NO = 1
    • NO {
    • wrapItemAndSub = <li>|</li>
    • ATagParams.cObject = IMG_RESOURCE
    • ATagParams.cObject {
    • # Hierhin das Kernstück: Das Zusammenbauen
    • # der Grafik, siehe Folge-Seite
    • }
    • }
    • }
    • stdWrap.wrap = <div id=&quot;navigation&quot;>|</div>
    • }
  • Graphische Menues: Das Kernstueck
    • file = GIFBUILDER
    • file {
    • format = png
    • XY = [20.w]+20,50
    • 20 = TEXT
    • 20 {
    • text.field = title
    • fontSize = 20
    • fontFile = fileadmin/templates/fonts/arioso.ttf
    • }
    • }
    • # in {TSFE:lastImgResourceInfo|0}px sind alle Daten des zuletzt
    • # erstellten Bildes verfügbar, also auch die Breite
    • stdWrap.dataWrap (
    • style=&quot;display: block; text-indent: -999em; width: {TSFE:lastImgResourceInfo|0}px ; background-image: url('/|');&quot;
    • )
  • Graphische Menues: Details
    • Details hierzu in Kasper's Podcast:
    • Tips'n'Tricks: ttmenu vom 9. Sep 2008
    • http://typo3.org/podcasts/kasper/
    • ?tx_podkast_pi1[pointer]=3&cHash=42a1755d2d
  • In2 code. Vielen Dank www.in2code.de Stefan Busemann Tina Gasteiger Alex Kellner