open source library Christoph Lindemann Maik Cairo TYPO 3 Tipps & Tricks Erste Hilfe von Installation bis Extension

Transkript

1 open source library Christoph Lindemann Maik Cairo TYPO 3 Tipps & Tricks Erste Hilfe von Installation bis Extension

2 Herzstück eines jeden Content Management-Systems ist die automatische Erzeugung der Navigation in Abhängigkeit von der Seitenstruktur und der dynamischen Generierung von Bildern. Dieses Kapitel soll Ihnen die unterschiedlichen Menüvarianten für Navigationen veranschaulichen und rund um die diversen Konfigurationsmöglichkeiten kleine Hilfen sowie Tipps und Tricks zur Umsetzung Ihrer Vorstellungen einer individuellen Navigation in die Realität liefern. 5.1 HMENU Das HMENU-Objekt ist die Mutter aller Menüs. Über dieses Objekt werden strukturelle Einstellungen vorgenommen. Im HMENU stellen Sie ein, wie viele Ebenen die Navigation haben soll, ab wo die Navigation beginnen und wie umfangreich die Navigation sein soll Navigationszustände aktivieren Über das HMENU wird die Navigationsstruktur festgelegt. Mit nur drei Zeilen Typo- Script lässt sich bereits eine Grundnavigation erzeugen. temp.navigation = HMENU temp. navigation.1 = TMENU temp. navigation.1.no = 1 Der Zustand NO ist der Basiszustand eines Menüpunktes. Wenn von diesem Zustand keine Eigenschaften gesetzt sind, muss auch dieser Zustand wie in der dritten Zeile aktiviert werden. Beim Setzen von Eigenschaften aktiviert sich dieser Zustand automatisch, anders als alle anderen Zustände, wie zum Beispiel der Rollover-Zustand RO, die immer aktiviert werden müssen. temp.navigation = HMENU temp. navigation.1 = TMENU temp. navigation.1.no.linkwrap = <br> // jetzt braucht NO nicht mehr aktiviert zu werden

3 5.1.2 Hauptnavigation durch Unternavigation erweitern Um innerhalb der Hauptnavigation die Unternavigation angezeigt zu bekommen, muss das nächste Menü-Objekt aktiviert werden. Wenn also die Hauptnavigation mit dem TypoScript temp.navigation = HMENU temp. navigation.1 = TMENU generiert wird, dann wird die Unternavigation mit temp. navigation.2= TMENU erzeugt. Das hat zur Folge, dass die Hauptnavigation bis zu dem Menüpunkt erzeugt wird, der aufgerufen wurde. Dann folgt die Unternavigation des Menüpunktes und der Rest der Hauptnavigation. Diese Navigation ändert sich also je nachdem, welche Seite der Hauptnavigation aufgerufen wurde. Mit der Eigenschaft expall = 1 kann die Unternavigation aller Hauptseiten aber auch permanent angezeigt werden. Abbildung 5.1: angezeigt Ist die Eigenschaft expall auf eins gesetzt, werden alle Unternavigationen 184

4 5.1 HMENU Abbildung 5.2: Ist die Eigenschaft expall nicht auf eins gesetzt, erscheint immer nur die komplette Navigation des aufgerufenen Navigationszweiges Durch das HTML-Tag blockquote wurde die Unternavigation in diesem Beispiel noch etwas eingerückt, um diese besser von der Hauptnavigation zu trennen. temp.navigation = HMENU temp.navigation.1 = TMENU temp.navigation.1.wrap = <div style=padding:10px> </div> temp.navigation.1 { # expall = 1 NO.linkWrap = <b> </b><br> temp.navigation.2 = TMENU temp.navigation.2.wrap = <blockquote> </blockquote> temp.navigation.2 { NO.linkWrap = <br> 185

5 5.1.3 Haupt- und Unternavigation räumlich trennen Um die Unternavigation von der Hauptnavigation abkoppeln zu können, muss die Eigenschaft entrylevel verwendet werden. Die Hauptnavigation bleibt dabei unverändert. Die Unternavigation hingegen wird in einem separaten Objekt angelegt, genau wie auch die Hauptnavigation und kann dadurch beliebig positioniert werden. temp.subnavigation = HMENU temp.subnavigation.1 = TMENU temp.subnavigation.1.no = 1 Jetzt wird für die Unternavigation eine Einstiegsebene festgelegt, ausgehend von der rootline, ab der die Navigation startet. temp.subnavigation.entrylevel = 1 Abbildung 5.3: Über dem Inhalt befindet sich die Hauptnavigation. Die abgekoppelte Unternavigation wurde links neben dem Inhaltsbereich platziert Bei der Angabe des entrylevels wird die Ebene angegeben, von deren Unterseiten die Navigation erzeugt werden soll. 186

6 5.1 HMENU Abbildung 5.4: Die Seite mit dem Globus-Symbol ist die rootline Wenn eine der Hauptseiten keine Unterseiten besitzt, wird natürlich auch keine Unternavigation angezeigt. Die Eigenschaft expall auf eins zu setzen ist hier kaum sinnvoll, da dann die kompletten Unterseiten aller Hauptnavigationspunkte gelistet werden würden und diese nicht mehr den einzelnen Hauptnavigationspunkten zugeordnet werden könnten Footer-Navigation Eine Footer-Navigation befindet sich meist am Fuße einer jeden Seite, daher auch der Name. Die in dieser Navigation verknüpften Seiten beinhalten oft Verknüpfungen zu rechtlichen Hinweisen, Impressum und Kontaktseiten, die von jeder Seite des Internetauftrittes zu erreichen sein sollen und meist nicht in der Hauptnavigation erwünscht sind. Beispiele solcher Navigationen finden Sie auf den Seiten der großen Online-Magazine wie zum Beispiel dem Spiegel ( oder in einer etwas übersichtlicheren Variante bei Die Welt ( Eine solche Navigation können Sie in TYPO3 mit wenigen Handgriffen generieren. Legen Sie als Erstes eine neue Seite an, in der die Seiten der Footer-Navigation platziert werden. Damit diese Seite nicht in der normalen Navigation auftaucht, ändern Sie den Seiten-Typ auf NICHT IM MENÜ. Den Seiten-Typ können Sie einstellen, indem Sie im Seiten-Modus die Seite in der Navigationsleiste auswählen und dann in der Detailansicht auf SEITENTITEL BEARBEITEN klicken. Alternativ können Sie auch über das Kontextmenü der Seite in der Navigationsleiste durch Klicken auf SEITENTITEL BEARBEITEN den entsprechenden Befehl aufrufen. 187

7 Abbildung 5.5: Damit die Seite mit den Punkten der Footer-Navigation nicht in der eigentlichen Navigation auftaucht, sollte diese auf den Typ Nicht im Menü gesetzt werden Wenn der Seiten-Typ auf NICHT IM MENÜ eingestellt wird, verändert sich auch das Symbol der Seite in der Navigationsleiste. Statt des gelben wird dann ein graues Symbols angezeigt. Nun kann das Menü generiert werden, das aus den Seiten bestehen soll, die in der Seite mit der Footer-Navigation platziert sind. Zunächst wird wieder ein HMENU angelegt: temp.footer_navi = HMENU Das HMENU wird jetzt aber die spezielle Art directory (Directory, engl. = Verzeichnis): temp.footer_navi.special = directory Jetzt muss dieser Spezialform noch das Verzeichnis übergeben werden, in dem sich die Seiten befinden, aus denen die Navigation generiert werden soll. Mit der Eigenschaft value können Sie die ID der Seite übergeben, die als Verzeichnis dienen soll. Soll die Navigation aus Seiten von mehreren Verzeichnissen bestehen, trennen Sie einfach die einzelnen Verzeichnisse durch ein Komma. temp.footer_navi.special.value = 99 Eine solche Footer-Navigation kann schon mit nur fünf Zeilen TypoScript realisiert werden. temp.footer_navi = HMENU temp.footer_navi.special = directory temp.footer_navi.special.value = 99 temp.footer_navi.1 = TMENU temp.footer_navi.1.wrap = <div id="footer"> </div> 188

8 5.1 HMENU Abbildung 5.6: Die Footer-Navigation am Ende einer jeden Seite Browse-Navigation Mit der Browse-Navigation lässt sich ein Blättern durch die Seiten wie durch ein Buch realisieren. So kann zum Beispiel über diese Navigation zur vorherigen und nächsten Seite navigiert werden. Außerdem kann über die Browse-Navigation zur vorherigen und nächsten Sektion gesprungen werden. Navigation next/prev Beschreibung Verlinkt zur nächsten und vorherigen Seite. Diese Seiten müssen dabei identische PIDs besitzen, wie die aufgerufene Seite, sie müssen also auf der gleichen Seite platziert sein. Wenn die Eigenschaft prevnexttosection gesetzt ist, kann auch zu Seiten mit anderen PIDs verlinkt werden. Dann müssen diese sich aber auf demselben Level befinden. Tabelle 5.1: Sprungziele in der Browse-Navigation 189

9 Navigation nextsection/prevsection nextsection_last/prevsection_last first/last up index Beschreibung Verlinkt zur ersten Seite der nächsten oder vorherigen Sektion. Die erste Seite der nächsten Sektion ist diejenige, die eine andere PID besitzt, sich aber auf demselben Level befindet. Die Seite befindet sich also in einem anderen Seitenzweig. Hier wird zur jeweils letzten Seite der nächsten bzw. letzten Sektion verlinkt. Verlinkt zur ersten oder letzten Seite des aktuellen Levels. Verlinkt zur Elternseite, also zur Seite in der die aktuelle Seite platziert ist. Verlinkt zur Index-Seite, die über die Eigenschaft index.uid angegeben werden kann. Tabelle 5.1: Sprungziele in der Browse-Navigation (Forts.) Mit einer solchen Browse-Navigation lässt sich beispielsweise ein kleiner Stadtrundgang realisieren. Ein TypoScript Basis würde wie folgt aussehen: temp.stadtrundgang = HMENU temp.stadtrundgang { special = browse special { items = prev next items.prevnexttosection = 1 index.fields.title = INDEX index.uid = = TMENU 1.NO = Breadcrumb-Navigation Eine Breadcrumb-Navigation ist eine Navigation, die aus der jeweils übergeordneten Seite bis hinauf zur Homepage besteht. Eine solche Navigation legt eine Art»Brotkrümelspur«zur aktuellen Seite, daher der Name (breadcrumb = Brotkrümel). Diese Art von Navigation wird oft bei großen Websiteprojekten eingesetzt. So auch beim Auktionshaus ebay, wo über eine solche Navigation alle übergeordneten Kategorien angezeigt werden. Eine solche Navigation kann mit der Spezialform rootline des HMENU erzeugt werden. Über die Eigenschaft range kann der Bereich angegeben werden, über den die Navigation generiert werden soll. 190

10 5.1 HMENU Abbildung 5.7: Über die Browse-Navigation kann bei dieser Site von einer Sehenswürdigkeit zur nächsten gesprungen und so ein kleiner Stadtrundgang erzeugt werden Abbildung 5.8: Die Reihenfolge des Rundganges wird im Backend durch die Reihenfolge der Seiten festgelegt 191

11 temp.breadcrumb = HMENU temp.breadcrumb.special = rootline temp.breadcrumb.special.value = 0 2 temp.breadcrumb.1 = TMENU temp.breadcrumb.1.no = 1 temp.breadcrumb.1.no.linkwrap = > * > * Abbildung 5.9: Die Breadcrumb-Navigation verschafft eine optimale Übersicht, welche Seite aktuell aufgerufen ist Bereichsüberschriften Mit dem HMENU spezial= rootline lassen sich Menüs ausgehend von der Root-Seite erzeugen. Über die Eigenschaft range kann dieses Menü aber auf bestimmte Ebenen, oder auch Levels genannt, begrenzt werden. In diesem Beispiel begrenzen wir das Menü auf nur eine Ebene, die der Hauptnavigation, und platzieren das Menü, das also immer nur aus einem Menüpunkt besteht, 192

12 5.2 TMENU über der Unternavigation. Resultat ist, dass immer der Menüpunkt der aufgerufenen Hauptseite angezeigt wird, auch wenn eine der Unterseiten unterhalb dieser Hauptseite aufgerufen wird. temp.bereichs_ueberschrift = HMENU temp.bereichs_ueberschrift.special = rootline temp.bereichs_ueberschrift.special.range = 1 1 temp.bereichs_ueberschrift.1 = TMENU temp.bereichs_ueberschrift.1.no.linkwrap = <b> </b> <br> Wenn unterhalb dieses Menüs die Unternavigation platziert wird, fungiert dieses Menü als Bereichsüberschrift. Abbildung 5.10: Mit einer solchen Bereichsüberschrift weiß der Websitebesucher immer, in welchem Bereich er sich gerade befindet 5.2 TMENU Sie haben das TMENU bereits in den vorangegangenen Beispielen kennen gelernt und wissen, dass das TMENU eine textbasierte Navigation zur Folge hat, daher stammt auch das T(ext) in TMENU. Wenn die Navigationsstruktur mit dem HMENU 193

13 festgelegt wurde, kann den einzelnen Ebenen ein MENU zugeordnet werden. Grundsätzlich lassen sich die unterschiedlichen Menüs auch mischen, sodass zum Beispiel auf der ersten Ebene eine grafische Navigation mit einer textbasierten Unternavigation erzeugt wird, oder umgekehrt Trennzeichen in Text-Menüs Oft werden Sonderzeichen als Trennzeichen in textbasierten Menüs gewünscht. Mit der Wrap-Funktionalität von TYPO3 können beliebige Zeichen vor oder nach den Menüeinträgen eingefügt werden. Problematisch wird es nur, wenn Sie Sonderzeichen verwenden möchten. Das Pipe- Zeichen, also der senkrechte Strich oder Klammern jeder Art, werden vom Typo- Script-Interpreter als Steuerzeichen erkannt, sodass Sie nicht das erwünschte Resultat erhalten. In solchen Fällen können Sie aber die HTML-ASCII-Werte des Sonderzeichens verwenden. Das Pipe-Zeichen zum Beispiel hat den Wert 124. Jeder HTML ASCII-Wert muss mit einem kaufmännischen Und, gefolgt von einer Raute eingeleitet werden. Das Ende des Wertes muss mit einem Semikolon gekennzeichnet werden. Im TypoScript würde das dann wie folgt aussehen: allwrap = Auf diese Weise wird jedem Menüpunkt ein senkrechter Strich angefügt. ASCII-Wert 40 ( 41 ) < 62 > 91 [ 93 ] 123 { Zeichen Tabelle 5.2: Zeichen und deren ASCII-Werte, die oft für textbasierte Menüs verwendet werden 194

14 5.2 TMENU Wenn Sie die senkrechten Striche lediglich zwischen den Menüpunkten haben möchten, können Sie sich der Option Split-Funktionalität bedienen. Mit dem Option Splitting kann beispielsweise zwischen dem ersten, letzten und allen anderen Menüpunkten unterschieden werden. Diese Menüpunkte werden durch einen senkrechten Strich, ein Sternchen und einen weiteren senkrechten Strich getrennt *. Allgemein würde das wie folgt aussehen: Erster Menüpunkt * mittlere Menüpunkte * letzter Menüpunkt Diese Unterscheidung kann nun in der Eigenschaft allwrap verwendet werden. allwrap = * * Es ist auch ein etwas anderes Option Splitting möglich, das in einer etwas verkürzten Version notiert wird: allwrap = * * In diesem Beispiel passiert mit dem ersten Menüpunkt nichts. Dem mittleren wird jeweils ein senkrechter Strich vorangestellt sowie auch dem letzten. Auf diese Weise erhält man dann zwischen allen Menüpunkten einen senkrechten Strich. Abbildung 5.11: Die senkrechten Striche zwischen den Menüpunkten mit Option Splitting 195

15 5.3 GMENU Wenn Sie lieber grafische Menüs generieren möchten, können Sie das GMENU dazu verwenden Simple GMENU Ein GMENU wird aus Grafiken generiert. Jeder Menüpunkt hat dabei seine eigene Grafik, die aus mehreren Bestandteilen generiert wird. Wenigstens sollten die Grafiken einen Text beinhalten, der aus dem jeweiligen Seiten-Header abgeleitet wird. In der Regel ist das der Seitentitel. Ein Basis GMENU, das 200 x 20 Pixel große weiße Grafiken mit dem jeweiligen Seitentitel generiert, würde wie folgt aussehen: temp.navigation = HMENU temp.navigation.1 = GMENU temp.navigation.1.no { wrap = <br> XY = 200,20 backcolor = white 10 = TEXT 10.text.field = title 10.offset = 10,14 Abbildung 5.12: Ein GMENU in der Basisausführung mit weißem Hintergrund GMENU mit Hintergrundgrafiken Um dem GMENU eine Hintergrundgrafik hinzuzufügen, muss lediglich ein weiteres numerisches Objekt vom Typ IMAGE angelegt werden. Dabei ist zu beachten, dass die numerischen Objekte in aufsteigender Reihenfolge abgearbeitet werden. Das 196

16 5.3 GMENU Objekt mit der Hintergrundgrafik muss also zuerst erzeugt werden und damit die kleinste Nummer besitzen. Andernfalls würde die Hintergrundgrafik zum Beispiel den Text überdecken. temp.bnavigation = HMENU temp.navigation.1 = GMENU temp.navigation.1.no { wrap = <br> XY = 200,24 5 = IMAGE 5.file = menu_bg*.gif 10 = TEXT 10.text.field = title 10.offset = 10,14 10.fontSize = fontColor = #9B9B9B Die im numerischen Objekt fünf übergebene Grafik ist in diesem Beispiel 200 Pixel breit und 24 Pixel hoch. Diese Grafik muss dem Template als Ressource hinzugefügt werden, andernfalls muss der komplette Pfad angegeben werden. Abbildung 5.13: Im GMENU wurde eine Hintergrundgrafik eingefügt mit einem Farbverlauf, um einen Übergang zum Inhaltsbereich zu schaffen 197

17 5.3.3 GMENU mit Rollover-Effekt Um einen Rollover-Effekt mit einer grafischen Navigation zu generieren, muss mit einem JavaScript die Grafik des jeweiligen Menüpunktes ausgetauscht werden, wenn sich die Maus über dem jeweiligen Menüpunkt befindet. TYPO3 generiert dieses JavaScript wie auch die Grafiken automatisch. Dazu muss lediglich ein weiteres Zustandsobjekt angelegt und aktiviert werden. In diesem Fall handelt es sich um das Objekt RO. Das realisiert man am einfachsten, indem das vorhandene NO-Objekt in das neue RO-Objekt vererbt bzw. kopiert wird. Objekte können mit der spitzen Klammer in Pfeilrichtung übergeben werden. temp.navigation.1.ro < temp.subnavigation.1.no Auf diese Weise würde zum Beispiel das NO-Objekt in das RO-Objekt übergeben. Anschließend können einzelne Veränderungen vorgenommen werden, wie zum Beispiel eine Änderung der Schriftfarbe. temp.navigation.1.ro.10.fontcolor = black Jetzt muss das RO-Objekt allerdings noch aktiviert werden. Nur das NO-Objekt aktiviert sich selbst, sobald eine Eigenschaft gesetzt wird. Alle anderen Objekte müssen auch wenn Eigenschaften gesetzt wurden, noch zusätzlich aktiviert werden. temp.navigation.1.ro = Aktive Seiten im GMENU hervorheben Seiten, die aufgerufen sind, können über das Zustandsobjekt CUR im grafischen Menü gesondert hervorgehoben werden. Dazu wird das NO-Objekt in das CUR- Objekt übergeben. Anschließend können einzelne Eigenschaften angepasst werden. In diesem Beispiel wollen wir die Hintergrundgrafik der aktuell aufgerufenen Seiten in der Navigation austauschen. Dazu wird zunächst das NO-Objekt in das CUR- Objekt übergeben: temp.navigation.1.cur < temp.subnavigation.1.no Anschließend wird die Eigenschaft file des IMAGE-Objektes angepasst und eine andere Hintergrundgrafik eingestellt, die dem Template als Ressource hinzugefügt werden muss. temp.navigation.1.cur.5.file = menu_cur_bg *.gif Als Letztes muss das CUR-Objekt noch aktiviert werden. temp.navigation.1.cur = 1 198

18 5.3 GMENU Abbildung 5.14: Mit nur drei Zeilen TypoScript kann TYPO3 veranlasst werden, einen weiteren Satz Navigationsgrafiken und das JavaScript für den Rollover-Effekt zu generieren Abbildung 5.15: Durch Hervorheben der aufgerufenen Seiten in der Navigation erleichtern Sie Ihren Besuchern die Orientierung auf der Website 199

19 5.3.5 Die unterschiedlichen Zustände des GMENU Die gängigsten Zustandsobjekte des GMENU sind das RO-Objekt für den Rollover- Effekt und das CUR-Objekt, um die aufgerufene Seite hervorzuheben. Das grafische Menü kennt aber noch eine Reihe weiterer Objekte, um zum Beispiel Seiten mit Unterseiten in den Menüs gesondert einstellen zu können. Zustandsobjekt NO RO IFSUB ACT ACTIFSUB CUR USR SPC Beschreibung»Normal«Status der Navigationspunkte. NO ist für jedes Menü notwendig und wird beim Setzen von Eigenschaften automatisch aktiviert. Werden keine Eigenschaften eingestellt, muss NO=1 gesetzt werden. Die einfachste Form würde wie folgt aussehen: Seite.10 = HEMNU Seite.10.1 = TMENU Seite.10.1.NO = 1 Aktiviert den Rollover-Zustand und integriert automatisch das Java- Script für den interaktiven Bildwechsel. Aktiviert die Konfiguration für Menüpunkte, die Unterseiten beinhalten. Aktiviert die Konfiguration für Menüpunkte, die in der rootline gefunden wurden. Aktiviert die Konfiguration für Menüpunkte, die in der rootline gefunden wurden und zusätzlich Unterseiten beinhalten. Aktiviert die Konfiguration für Menüpunkte, die aktuell aufgerufen sind. Aktiviert die Konfiguration für Menüpunkte, die zugangsbeschränkt sind. Aktiviert die Konfiguration von Seiten vom Typ Spacer. Diese Seiten können nicht angezeigt werden, sondern sind Platzhalter, die zum Unterteilen der Navigation genutzt werden können. Tabelle 5.3: Die Zustandsobjekte, die im GMENU zur Verfügung stehen GMENU mit unterschiedlich breiten Grafiken Wenn Sie beispielsweise Ihr grafisches Menü horizontal anordnen möchten, ist es sinnvoll, die Grafikbreite der einzelnen Menüpunkte von der Textlänge des Menüpunktes abzuleiten. Bei der Übergabe der Größe durch die Eigenschaft XY kann das realisiert werden. Dazu muss in eckigen Klammern das Objekt genannt werden, dessen Breite herangezogen werden soll. Die Syntax für diese Art der Größenangabe sieht wie folgt aus: XY = [10.w]+x Pixel,[10.h]+x Pixel 200

20 5.3 GMENU In der ersten eckigen Klammer wird zum einen ein numerisches Objekt angegeben und mit dem Buchstaben w die Breite (width). In der zweiten eckigen Klammer wird wiederum ein numerisches Objekt angegeben, dessen Höhe (height) verwendet werden soll. Diesen beiden Angaben können noch beliebige Pixelwerte hinzuaddiert werden. Im folgenden Beispiel werden die Grafiken der einzelnen Menüpunkte mit der Breite des jeweiligen TEXT-Objektes plus 10 Pixel erzeugt. Der Text wird durch die Eigenschaft offset um fünf Pixel verschoben und erscheint somit immer zentriert in der Grafik. temp.navigation = HMENU temp.navigation.1 = GMENU temp.navigation.1.no { wrap = XY = [10.w]+10,24 backcolor = #FF = TEXT 10.text.field = title 10.offset = 5,16 10.fontSize = fontColor = white Abbildung 5.16: Die vier Menüpunkte variieren in der Breite je nach Länge des jeweiligen Textes 201

21 5.4 Dropdown-Menüs Dropdown-Menüs sind eine Sonderform der Navigationsmenüs, bei denen die einzelnen Sprungziele als Liste in einem Pulldown-Menü aufgelistet werden Dropdown-Menü mit dem JSMENU-Objekt Mit dem Menü-Objekt JSMENU lassen sich sehr einfach Dropdown-Menüs generieren. Die Pull-Seiten werden dann über ein JavaScript aufgerufen. Das JavaScript wird integriert, weil mit diesem Menü auch Dropdown-Navigationen über mehrere Levels möglich sind und weitere Funktionen eingebunden sind, die nur mit JavaScript realisierbar sind. Diese Menüs werden wie auch die TMENU- und GMENU-Objekte in einem numerischen Unterobjekt des HMENU angelegt. Es stehen also auch hier alle Einstellmöglichkeiten des HMENU zur Verfügung. In diesem Beispiel generieren wir mit dem special=directory ein Dropdown-Menü aus den Seiten eines Verzeichnisses. Über levels = 1 wird festgelegt, über wie viele Ebenen sich das Dropdown-Menü erstrecken soll. Beim special=directory ist nur eine Ebene sinnvoll. Menüs, die nicht vom special=directory sind, können sich natürlich auch über mehrere Ebenen erstrecken. Dann werden mehrere Dropdown-Menüs generiert, deren Auswahlmöglichkeiten von der Auswahl des übergeordneten Dropdown-Menüs abhängen. temp.dropdown_menu = HMENU temp.dropdown_menu.special = directory temp.dropdown_menu.special.value = 194 temp.dropdown_menu.1 = JSMENU temp.dropdown_menu.1{ levels = 1 1 { nolink = 0 alwayslink = 0 showfirst = 0 additionalparams = style="width: 200px;" firstlabel = >> Hier bitte selektieren << Dropdown-Menü mit TMENU Das Dropdown-Menü kann auch über das TMENU-Objekt erzeugt werden. Dann muss das TMENU geschickt in ein HTML-Formular durch die wrap-eigenschaften eingebettet werden. 202

22 5.4 Dropdown-Menüs Abbildung 5.17: Ein Dropdown-Menü kann über das JSMENU sehr einfach generiert werden In diesem Beispiel ist die erste wrap-eigenschaft die wichtigste. Hier wird das HTML- Formular erzeugt und über das onchange Event wird der Aufruf der im Dropdown- Menü selektierten Seite realisiert. Auch diese Variante funktioniert nur bei aktiviertem JavaScript, da sonst das onchange Event nicht berücksichtigt wird. Diese Variante lässt sich aber individuell anpassen. In diesem Beispiel wird eine Navigation über zwei Ebenen abgebildet. Durch die Eigenschaften allwrap werden die einzelnen Menüpunkte im Dropdown-Menü gesondert ausgezeichnet. Die Menüpunkte der zweiten Ebene werden außerdem noch im Menü eingerückt. Durch das Zustandsobjekt CUR können auch die derzeit aufgerufenen Seiten gesondert formatiert werden. temp.dropdown = COA temp.dropdown { 10 = HMENU 10.wrap = <form name="quickmenu" action=""><select name="pfad" onchange="window.location='index.php?id='+ document.quickmenu.pfad.options[document.quickmenu.pfad.selected Index].value" class="dropdown"> </select></form> 10.1 = TMENU 10.1 { 203

23 expall = 1 NO.allWrap = <option value="{elementuid"> - </option> NO.subst_elementUid = 1 NO.doNotLinkIt = 1 CUR <.NO CUR = 1 CUR.allWrap = <option value="{elementuid" selected > > </option> 10.2 = TMENU 10.2 { expall = 1 NO.allWrap = <option value="{elementuid"> - </option> NO.subst_elementUid = 1 NO.doNotLinkIt = 1 CUR <.NO CUR = 1 CUR.allWrap = <option value="{elementuid" selected> > </option> Abbildung 5.18: Das Dropdown-Menü über zwei Navigationsebenen 204