Arbeiten mit Menüs

von Stefan Christ

In Typo3 gibt es 4 technische Menüarten: Textmenüs, grafische Menüs, Layermenüs und Javascriptmenüs.

Wir Konzentrieren uns als erstes auf das Textmenü.

Hierzu begeben wir uns wieder in die Template-Umgebung.


In Zeile 43 Sprechen wir wie bereits bekannt den Platzhalter UNTER_MENU an und es wird eine Instanz des Objektes HMENU erzeugt. In Zeile 44 geben Sie mit der Eigenschaft .special an dass es sich bei dem erzeugten Menü um ein directory-Menü handelt. In Zeile 45 wird über die Eigenschaft .special der Wert (uid) für den Start, in der Baumstruktur. In unserem Fall ist dies der Shortcut Menü Oben. Um die uid einer Seite herauszufinden können sie einfach im Backend im Seitenbaum mit dem Mauszeiger über das Seitensymbol neben Menü Oben fahren, und ihnen wird die id angezeigt.


In Zeile 63 wird angegeben, dass es sich auf der ersten Menüebene um ein Textmenü (TMENU) handelt. Für diese Ebene wird in Zeile 63 der normale Zustand aktiviert.

Zustände müssen im Regelfall explizit mit [Zustand] = 1 aktiviert werden.

In Zeile 49 wird die Trennung der Menüeinträge vorgenommen. Hiermit werden zwischen den Menüeinträgen Leerzeichen &nbsp und die Trennstriche &#124 (mittels Ascii-Code) da das Warp-Symbol | bereits fest vergeben ist.

Folgende Ausgabe bestätigt den Erfolg.


Nun gehen wir einen Schritt weiter und lassen das Menü Links grafisch erstellen.

Um dieses zu realisieren müssen wir allerdings erst die Schriftart (im Beispiel verdana.tff und eine später benötigte weisse Linie hochgeladen werden.

Wechseln sie dazu im Backend im linken Menü auf Dateiliste und laden sie die Datei verdana.tff in das Verzeichnis Fonts und die Datei linie_weiss.gif in das Verzeichnis Images.

Wechseln Sie nun wieder zum Template und bearbeiten es wie folgt:


Die Zeilen 53, 54 und 56 – 59 sind bereits aus dem Textmenü bekannt und es wird nicht näher darauf eingegangen (spezial.value = 25 entspricht der Seite Menü Links).

In Zeile 55 wird mittels der Funktion wrap eine weisse Linie oberhalb des Menüs platziert.

In Zeile 61 wird eine Grafik erzeugt die als Hintergrund für den Menüpunkt gilt, sie ist 178 Pixel breit und 24 Pixel hoch. In Zeile 62 wird ihr dann die Farbe, zugewiesen.

Der Text, der auf den Grafiken erscheinen soll wird in Zeile 65 auf Ebene 10 angelegt. Nun wird in Zeile 66 angegeben, dass der Text dynamisch dem Seitentitel der jeweiligen Seite entsprechen soll. Diverse Formatierungen wie die Farbe, Ursprungdatei der Font, Textgrösse, die Option niceText (zur Kantenglättung) und die Verschiebung nach rechts und unten werden in den Zeilen 67 – 71 gemacht.

In Zeile 74 wird eine weitere Ebene 20 als Instanz des IMAGE-Objekts angelegt.

Die Höhe sowie Breite wird in Zeile 77 angegeben und beträgt 178 x 1 Pixel und erhält in Zeile 78 die Farbe weiss. Und in Zeile 80 wird das Ganze um 0 Pixel nach rechts und um 23 nach links verschoben.

Um den Rollover-Zustand zu beschreiben wird in Zeile 84 eine Relative Kopie vom Zustand NO in den zustand RO erstellt, diese erhält nun eine andere Farbe, die etwas heller ist.

Ein Blick auf das Frontend macht die Änderungen deutlich.


Bei einem Klick auf die Menüpunkte ändert sich jedoch nur der Text in der Programmleiste des IE ändert. Also werden wir nun einen dynamischen Text auf den Trailer rendern. Passen sie Ihr Template entsprechend an:


Wenn Sie den Script-Auszug betrachten werden Sie nichts Neues entdecken, das Resultat jedoch wird im Fronend sichtbar.

Als nächstes realisieren wir einen Klickpfad. Dazu sprechen wir wie bisher den Marker entsprechenden Marker an:


In Zeile 52 lernen wir ein neues Objekt kennen, welches uns erlaubt, mehrere Objekte auf für einen Platzhalter zu beschreiben, dies erfolgt mit einer numerischen Liste mit den Zahlen 10, 20, 30…

Nun wird als erstes ein Text bestimmt der ausgegeben wird, dies geschieht in den Zeilen 54 und 55. Als nächstes wird ein Menü mithilfe des HMENU-Objekts erzeugt, die Eigenschaft .special wird um einen Klickpfad zu erzeugen wird in Zeile 59 der Wert rootline zugewiesen.

Um die Hilfsseiten nicht anzuzeigen wird in der Eigenschaft .special.range der Wert 2|-1 angegenben. Dieser Wert gibt an, dass der Klickpfad erst in der zweiten Ebene der Root-Ebene beginnen und nie enden (-1) soll. Die übrigen Zeilen kennen Sie bereits und werden hier nicht weiter erläutert.

Ein Blick auf das Frontend zeigt die Änderung.

 

 

 
   Anzeigen


Navigation:    Webdesign - Programmierung - Web Grafiken - Software Guides - Tools - Templates - Schriftarten - Seminare - IT News
Partner:   Template OK - PCopen - SITEopen - PCopen Schweiz - HTMLopen Schweiz - VirtualUniversity.ch - WEB-SET.com - YesMMS - Job und Karriere