Dropdown Menü in Typo3

An dieser Stelle möchte ich zeigen, wie man das Dropdown-Menü von dieser Website auf der eigenen Website einpflegen und nutzen kann. Dabei gehe ich nicht darauf ein, wie das Dropdown-Menü in jeglicher Weise modifiziert und angepasst werden kann. Dazu bitte die Dokumentation zu Typo3 heranziehen.

Das TypoScript für das Dropdown-Menü wurde von mir entworfen und darf frei verwendet und modifiziert werden. Der Source kann rechts im Bild kostenlos heruntergeladen werden.

Das Dropdown-Menü wird mittels JavaScript umgesetzt. Der Nutzer muss in seinem Browser also JavaScript aktiviert haben, was jedoch bei den meisten Nutzern der Fall sein sollte. Ist JavaScript nicht aktiviert, so wird lediglich der Layer nicht angezeigt, aber jedoch die erste Ebene der Menüs.

Will man das Dropdown-Menü nutzen so läd man zuerst die Zip-Datei rechts im Bild mit dem Source code und den Cascading Style Sheets (CSS) herunter und modifiziert die Datei seinen Ansprüchen entsprechend und läd die Dateien in ein beliebiges Verzeichnis auf die eigene Website.

Dabei sollte natürlich darauf geachtet werden, dass Typo3 Zugriffsrechte auf das Verzeichnis hat.

Dropdown Menü mit TypoScript

includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
 
#### IE begin ####
 
[browser = msie] && [version= <7]
 
temp.menu_gmenulayers = HMENU
temp.menu_gmenulayers.entryLevel = 0
temp.menu_gmenulayers {
special = list
special.value = 2,12,215,8,15,6,54
 
#### First IE layer begin ####
 
1 = GMENU_LAYERS
 
1 {
layerStyle = position:absolute;VISIBILITY:HIDDEN;z-index:3;
lockPosition = x
xPosOffset = -103
 
topOffset = 193
displayActiveOnLoad = 0
hideMenuWhenNotOver = 0
expAll = 1
 
NO {
 
XY = 137, 51
4 = IMAGE
4.file = fileadmin/template/design_slice/navi/navigation_03.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/navigation_08.gif
10 = TEXT
10.text.field = title
10.align = center
10.fontSize = 11
10.fontFile = fileadmin/template/fonts/verdana.ttf
10.fontColor = #FFFFFF
10.offset = 0,25
 
}
 
CUR = 1
 
CUR {
 
XY = 137, 51
4 = IMAGE
4.file = fileadmin/template/design_slice/navi_mouseover/navigation_03.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/navigation_08.gif
10 = TEXT
10.text.field = title
10.align = center
10.fontSize = 11
10.fontFile = fileadmin/template/fonts/verdana.ttf
10.fontColor = #FFFFFF
10.offset = 0,25
 
 
}
 
RO < .CUR
RO {
 
25 < .25
}
 
}
 
}
 
CUR = 1
 
CUR {
 
linkWrap = <div class="navigation_">|</div>
ATagParams = class="menulink" 
 
}
RO < .CUR
RO {
 
25 < .25
}
 
}
 
}
 
#### First layer IE end ####
#### IE end ####
[ELSE]
 
temp.menu_gmenulayers = HMENU
temp.menu_gmenulayers.entryLevel = 0
temp.menu_gmenulayers {
special = list
special.value = 2,12,215,8,15,6,54
 
#### First layer begin ####
1 = GMENU_LAYERS
 
1 {
layerStyle = position:absolute;VISIBILITY:HIDDEN;z-index:3;
 
relativeToParentLayer = 1
 
lockPosition = x
xPosOffset = -18
topOffset = 193
 
displayActiveOnLoad = 0
hideMenuWhenNotOver = 0
expAll = 1
 
NO {
 
XY = 137, 51
4 = IMAGE
4.file = fileadmin/template/design_slice/navi/navigation_03.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/mitte.gif || fileadmin/template/design_slice/navi/navigation_08.gif
10 = TEXT
10.text.field = title
10.align = center
10.fontSize = 11
10.fontFile = fileadmin/template/fonts/verdana.ttf
10.fontColor = #FFFFFF
10.offset = 0,25
 
}
 
CUR = 1
 
CUR {
 
XY = 137, 51
4 = IMAGE
4.file = fileadmin/template/design_slice/navi_mouseover/navigation_03.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/mitte.gif || fileadmin/template/design_slice/navi_mouseover/navigation_08.gif
10 = TEXT
10.text.field = title
10.align = center
10.fontSize = 11
10.fontFile = fileadmin/template/fonts/verdana.ttf
10.fontColor = #FFFFFF
10.offset = 0,25
 
}
 
RO < .CUR
RO {
 
25 < .25
}
 
}
#### First layer end ####
 
#### Second layer begin #######
2 = TMENU_LAYERS
2 {
 
layerStyle = position:absolute;VISIBILITY:HIDDEN;z-index:2;
 
relativeToTriggerItem = 1
relativeToParentLayer = 1
 
lockPosition = y
 
topOffset = 0
leftOffset = 225
 
displayActiveOnLoad = 0
hideMenuWhenNotOver = 0
expAll = 1
 
NO {
 
linkWrap = <div class="navigation">|</div>
ATagParams = class="menulink" 
 
}
 
CUR = 1
 
CUR {
 
linkWrap = <div class="navigation_">|</div>
ATagParams = class="menulink" 
 
}
RO < .CUR
RO {
 
25 < .25
}
 
}
 
#### Second layer end ####
 
#### Third layer begin ####
3 = TMENU
 
3 {
 
layerStyle = position:absolute;VISIBILITY:HIDDEN;z-index:1;
 
displayActiveOnLoad = 0
hideMenuWhenNotOver = 1
expAll = 1
 
NO {
 
linkWrap = <div class="navigation2">|</div>
ATagParams = class="menulink" 
 
}
 
CUR = 1
 
CUR {
 
linkWrap = <div class="navigation2_">|</div>
 
ATagParams = class="menulink" 
 
XY = 140, 51
 
}
RO < .CUR
RO {
 
25 < .25
}
 
}
 
#### Third layer end ####
}
 
[END]

Bevor man die Dateien hochläd, sollte man zuerst natürlich die Typo3Dropdown.txt seiner Typo3-Umgebung entsprechend anpassen, da ansonsten keine Funktionalität zu erwarten ist.

Zeile 1 und 2 müssen so erhalten bleiben, da sie die Bibliothek für die Erstellung der Layer einbindet.

In Zeile 6 ist eine Browserweiche zu erkennen, die sich bis Zeile 91 für den Internet Explorer unter der Version 7.0 (Also zum Beispiel 6.0) erstreckt.

Innerhalb dieser Zeilen ist nur ein Grafikmenü definiert und kein Layer. Die Browserweiche hatte ich damals erstellt, weil der Internet Explorer 6.0 den Layer zerstückelt hat.

Da mir jetzt aufgefallen ist, dass durch eine neue Konfiguration auch noch Stylesheet für den IE 6.0 nicht mehr korrekt angezeigt wird, ignoriere ich den Internet Explorer 6.0 jetzt komplett.

Wer das auch möchte, sollte einfach Zeile 6 bis 91 löschen und zusätzlich Zeile 239. Wer mit den IE 6.0 freiwillig surft und sich somit den Gefahren von Viren und Browser-Hijacking aussetzt, den macht bestimmt auch eine zerfetzte Website nichts aus.

Jedenfalls geh ich im Source nur auf den Code ab Zeile 91 ein. Nachdem also in Zeile 1 und 2 die Bibliotheken eingebunden sind, kann der Layer entwickelt bzw. konfiguriert werden.

In Zeile 93 bis 95 wird zuerst das HMENU definiert. Im HMENU werden die Grafikmenüs, Grafikmenülayer und Textmenülayer zusammengefasst und kombiniert.

Die erste Änderung muss in Zeile 97 erfolgen. Hier werden unter "value" die pid's von Typo3 der Pages eingetragen, auf die das HMENU angewendet werden soll.

Dabei werden nur die Menüeinträge auf der ersten Ebene angegeben ("entryLevel=0"), da die Pages unterhalb im Typo3 Verzeichnisbaums der Page, die mit "pid" eingebunden wurde, automatisch als Menülayer eingebunden werden.

In Zeile 119 werden fertige Bilder für die erste Ebene des Menüs eingebunden. Dabei müssen soviele Bilder mittels "||" verkettet werden, wie Pages mit ihrer "pid" in Zeile 97 definiert wurden.

Zeile 117 beschreibt die Größe der Bilder wohingegen in Zeile 124 die Schriftart bestimmt wird, die in die Bilder integriert wird.

Als Beschriftung für die Bilder wird der Name der Page im Verzeichnisbaum von Typo3 verwendet.

Ab Zeile 136 kann auf die gleiche Art und Weise ein Rollovereffekt definiert werden, indem zu Beispiel die gleichen Bilder mit einer anderen Farbe oder Schriftart eingebunden werden.

Ansonsten sollte zumindest jetzt schon ein Ergebnis zu sehen sein, dass nur noch anständig formatiert werden muss.

Dazu sollte man noch folgenden Background wissen zu den Notationen von TypoScript.

NO {

#Alles innerhalb dieser Klammern formatiert die "normale" (NOrmal) Ansicht vom Menü

}

CUR {

#Beschreibt die aktuelle Ansicht (CURrent)

}

RO < CUR. # Überschreibt RO mit CUR

RO {

#Beschreibt den Rollovereffekt (ROllover)

}

ATagParams = class="menulink"

#ATagParams beschreibt welche Klasse in der CSS-Datei

#auf den die Links im Menü angewendet wird (<a></a>)

linkWrap = <div class="navigation">|</div>

# "|" steht für den Link und besagt das ein div-Tag mit der Klasse navigation #den Link umrundet.

topOffset = 0
leftOffset = 225
yPosOffset
xPosOffset = -18

TypoScript

   1: <INCLUDE_TYPOSCRIPT: source="FILE: pfad/zu/DropDownMenue/typo3Dropdown.txt">
   2: 
   3: 
   4: page = PAGE
   5: page.bodyTag = <body>
   6: page {
   7: 
   8:       headerData.10 = TEXT 
   9:       headerData.10.value ( 
  10:         <link href="pfad/zu/css/cssStyleAll.css" rel="stylesheet" type="text/css" />
  11:         <!--[if IE]>
  12:         <link href="pfad/zu/css/cssStyleIE.css" rel="stylesheet" type="text/css" />
  13:         <![endif]-->        
  14:       ) 
  15: }

Hat man den Source code hochgeladen, bindet man die Textdatei mittels des Codes in Zeile 1 unter Template in Typo3 ein, wo auch der Pfad zur Datei eingetragen werden muss.

Theoretisch könnte man auch den gesamten Source code aus der Textdatei unter Template einfügen, aber das erschwert start den Aufwand bei Änderungen, da der Source auf jeder neuen Page unter Template eingefügt werden muss.

In Zeile 10-13 werden dann die CSS-Dateien für die Formatierung der Website fest und somit auch des Layer-Menüs festgelegt. Für eine gescheites Browseroptimierung bekommt der Internet Explorer in Zeile 11-13 eine eigene CSS-Datei zugewiesen.

Menü in Typo3 einbinden

   1: 
   2: page.10 = TEMPLATE
   3: page.10 {
   4: template = FILE
   5: template.file = verzeichnis/unterverzeichnis/pointZero.htm
   6: workOnSubpart = DOCUMENT_BODY
   7: 
   8: marks.TRANS_HEADER = PHP_SCRIPT
   9: marks.TRANS_HEADER.file = verzeichnis/unterverzeichnis/irgendwas.php
  10: 
  11: 
  12: marks.TOPIC_HEADER1 = TEXT
  13: marks.TOPIC_HEADER1.value = Überschrift 1
  14: 
  15: marks.TOPIC_HEADER2 = TEXT
  16: marks.TOPIC_HEADER2.value = Überschrift 2
  17: 
  18: marks.TOPIC_HEADER3 = TEXT
  19: marks.TOPIC_HEADER3.value = Überschrift 3
  20: 
  21: 
  22: marks.RIGHT1 = TEXT
  23: marks.RIGHT1.value = Überschrift 4
  24: 
  25: marks.RIGHT2 = TEXT
  26: marks.RIGHT2.value = Überschrift 5
  27: 
  28: marks.RIGHT3 = TEXT
  29: marks.RIGHT3.value = Überschrift 6
  30: 
  31: 
  32: subparts.SUBPART_MAIN_NAVI < temp.menu_gmenulayers
  33: #SUBPART_MAIN_NAVI kann z.B. mit einem gmenulayer überschrieben werden
  34: 
  35: subparts.SUBPART_HEADER = HTML
  36: subparts.SUBPART_HEADER < styles.content.get
  37: subparts.SUBPART_HEADER.select.where = colPos= 6
  38: 
  39: subparts.SUBPART_CONTENT0 = TEXT
  40: subparts.SUBPART_CONTENT0 < styles.content.get
  41: subparts.SUBPART_CONTENT0.select.where = colPos= 0
  42: 
  43: subparts.SUBPART_CONTENT_RIGHT0 = TEXT
  44: subparts.SUBPART_CONTENT_RIGHT0 < styles.content.get
  45: subparts.SUBPART_CONTENT_RIGHT0.select.where = colPos= 1
  46: 
  47: subparts.SUBPART_CONTENT_RIGHT1 = TEXT
  48: subparts.SUBPART_CONTENT_RIGHT1 < styles.content.get
  49: subparts.SUBPART_CONTENT_RIGHT1.select.where = colPos= 3
  50: 
  51: subparts.SUBPART_CONTENT2 = TEXT
  52: subparts.SUBPART_CONTENT2 < styles.content.get
  53: subparts.SUBPART_CONTENT2.select.where = colPos= 4
  54: 
  55: subparts.SUBPART_CONTENT_RIGHT2 = TEXT
  56: subparts.SUBPART_CONTENT_RIGHT2 < styles.content.get
  57: subparts.SUBPART_CONTENT_RIGHT2.select.where = colPos= 5
  58: 
  59: }

Kein Dropdown-Menü ohne Website-Template, da wir als nächstes Typo3 mitteilen müssen, wo im Template das Dropdown-Menü untergebracht werden soll. Dazu müssen in Typo3 wie gewohnt Subparts oder Marks verwendet werden.

In diesem Beispiel habe ich einen Subpart im Website-Template verwendet:

Das Dropdown-Menü wird in der zweiten Codebox in der Zeile 32 den Subpart zugewiesen. Dabei muss der Text "temp.menu_gmenulayers" beibehalten werden, da er in der Dropdown-Menü Datei bereits definiert ist.

An dieser Stelle angekommen, muss nur noch die Dropdown-Menü Datei hochgeladen werden, sofern es noch nicht erfolgt ist und zusätzlich muss der Cache von Typo3 geleert werden. Anschließend alles speichern und ihr habt euer Dropdown-Menü.

Bei Fragen über die Kommentarfunktion stehe ich gern zur Verfügung. Und sobald ist wieder Zeit und Lust habe, gibt es diese Anleitung korrigiert und optimiert. Erstmal ein vernünftiges Ranking in den Suchmaschinen erzielen :)

Viele Grüße

Patrick