Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > Navigation (HMENU)

TYPO3



Erzeugung einer Navigation mit TypoScript

TYPO3 verfügt über ein leistungsstarkes Tool zur automatischen Erzeugung einer Navigation für eine Webseite. Das Objekt HMENU bietet sowohl eine textbasierte Navigation als auch eine grafische Erstellung eines Menüs mit recht vielen Optionen wie Rollover, Ein- und Ausklappen von Seitenmenüs, Levelstrukturen für geteilte Haupt- und Untermenüs, einen Navigationspfad (Breadcrumb) und vieles mehr.

TYPO3 Seitenassistent (Zauberstab)

Bevor sinnvollerweise eine Navigation erstellt werden kann, sind zunächst ein paar Seiten anzulegen. In den vorangegangenen Kapiteln wurde ja nur eine Seite "Start" angelegt. Dafür gibt es ein recht leistungsstarkes Tool im Backend, den Menüpunkt Funktionen mit einem abgebildeten Zauberstab als Symbol. Nach dem Anklicken geht man auf die Webseite (Symbol mit der Weltkugel) und es wird ein Assistent für das Anlegen mehrerer Seiten gestartet.

Hier kann man bis zu 9, nach Wahl aber auch wesentlich mehr Seiten anlegen. Dabei wird nur der Seitentitel eingegeben, am Besten in der Reihenfolge, in der die Seiten erscheinen sollen. Es ist übrigens auch problemlos möglich, Seiten im Seitenbaum durch Anklicken und Bewegen zu verschieben. Um das Verschieben zu vermeiden, solte man die Option "Neue Seiten nach existierenden Unterseiten anlegen" auswählen. Sofern die Seiten durch einen Redakteur noch zu bearbeiten sind, kann man die neu angelegten Seiten auch erst verbergen und nach Fertigstellung freischalten. In einem produktiven Webauftritt ist das natürlich wichtig.

(Seitenassisten für Anlegen von mehreren Seiten)

Textbasierte Navigation mit HMENU und TMENU

Um eine Seitennavigation automatisch zu erzeugen, bedarf es nur wenige TypoScript Zeilen. Das folgende Script zeigt alle vorhandenen Seiten eines Webauftritts als Textlinks untereinander als vertikales Menü an.

topNavT=HMENU
topNavT {
  special=directory
  special.value=21
  1=TMENU
  1.NO=1
  1.NO.wrapItemAndSub=|<br />
}

page.40 < topNavT # Objekt anzeigen

Das Objekt HMENU definiert allgemeine Parameter für eine Navigation, ganz gleich ob das Untermenü TMENU für textbasierte oder GMENU für grafikbasierte Navigationsmenüs verwendet wird. Die Eigenschaft special definiert verschiedene Varianten welche Art Menü erstellt werden soll und mit welchen Seiten. Man kann das Menü auch auf Hauptseiten (Level) einschränken oder auf einen bestimmten Bereich von SeitenIDs oder auf auch auf eine manuell gepflegte Liste von SeitenIDs. 

Mit value wird die SeitenID der ersten Seite angegeben. Im Idealfall ist das die ID 1, in dieser Installation ist das für den Bereich "Neues Projekt" die ID 21. Das Feld muss angepasst werden und ist daher fett und rot formatiert. Die SeitenID erfährt man, wenn man im Seitenbaum mit dem Mauszeiger über den Seitentitel fährt mit dem angezeigten Kontextmenü oder zur Not auch im Menü "Seite bearbeiten" erscheint die SeitenID unten rechts nach den Eingabefeldern.

NO definiert den Normalzustand eines Menüelements, also ohne Rollovereffekt und die Eigenschaft wrapItemAndSub funktioniert analog zu dem bereits kennengelernten wrap. Das Pipe Symbol beinhaltet wieder den Inhalt des Elements und dort wird ein Zeilenumbruch mit <br /> angehängt, um die Links untereinander anzuzeigen. Jetzt ist das optisch noch kein Highlight und sicherlich besteht der Bedarf die Texte zumindest in Schriftart, Größe und Farbe anzupassen oder ggf. auch mit weiteren Parametern. Daher das nächste Beispiel mit erweiterten Funktionen.

#CSS Anweisungen für CSS Datei
a.menuTop, .menuTopMZ {
  margin:0;
  padding:3px;
  width:150px;
  font-family:verdana;
  font-size:14px;
  color:#003060;
  background-color:#A0D0FF
}

a.menuTop:hover {
  color:#C00000;
  text-decoration:underline;
}


#TypoScript Anweisungen für das Template
topNavT=HMENU
topNavT {
  special=directory
  special.value=21
  1=TMENU
  1.NO=1
  1.NO.ATagParams=class="menuTop"
  1.NO.wrapItemAndSub=<div class="menuTopMZ">|<br /></div>
}

page.40 < topNavT

Hier wird zunächst eine CSS Klasse definiert, menuTop für die Formatierung der Links. Leider verhalten sich die meist verwendeten Browser Firefox und Internet Explorer in der Darstellung unterschiedlich und so wird eine zweite CSS Klasse mit der Bezeichnung menuTOPMZ benötigt (Browserhack). Die zu verwendende Klasse kann am Einfachsten im Link als ATagParams angegeben werden. Hier kann man dem Link Tag zusätzliche Parameter mitgeben.

Das ganze angezeigte Element wird zum Schluss noch in ein DIV Tag gepackt, weil der Firefox Browser sonst die Breitenangabe der Links nicht richtig umsetzt. Nach Aufruf der Seite erscheint das Menü jetzt mit einer Vordergrund- und einer Hintergrundfarbe und die Links haben Abstände zueinander. Außerdem wurde noch ein Rollovereffekt hinzugefügt mit der CSS Anweisung für die Klasse a.menuTop:hover. Sofern man mit der Maus über die Links fährt, werden diese rot dargestellt und erhalten eine Linie unten.

Weitere Optionen für TMENU

Es gibt noch weitere Optionen für TMENU, zum Beispiel für eine Navigation mit Unterseiten. TMENU erkennt diese als sog. Level. Das oben erwähnte Beispiel geht direkt auf den Hauptlevel (1). Für das nächste Beispiel legt man am Besten erst einmal Unterseiten unter Projekte und Produkte an, z.B. A, B, C für Projekte oder Hardware, Software, Zubehör für Produkte. Das folgende TMENU Beispiel kann mit diesen Unterseiten "umgehen".

#CSS Anweisungen für CSS Datei
a.menuTop, .menuTopMZ, a.menuTop2, .menuTopMZ2 {
  margin:0;
  padding:3px;
  width:150px;
  font-family:verdana;
  font-size:14px;
  color:#003060;
  background-color:#A0D0FF
}

a.menuTop2, .menuTopMZ2 {
  padding-left:17px;
  width:130px;
}

#TypoScript Anweisungen für das Template
topNavT=HMENU
topNavT {
  special=directory
  special.value=21
  1=TMENU
  1.collapse=1
#  1.expAll=1
  1.NO=1
  1.NO.ATagParams=class="menuTop"
  1.NO.wrapItemAndSub=<div class="menuTopMZ">|<br /></div>
  2.NO=1
  2.NO.ATagParams=class="menuTop2"
  2.NO.wrapItemAndSub=<div class="menuTopMZ2">|<br /></div>  
}

page.40 < topNavT

Als erste Einstellung wurde collapse gewählt, expAll (expand all) wurde auskommentiert. Collapse klappt nur das jeweilige Menü aus, wenn man es anwählt. Ein Klick auf Projekte bringt die Unterseiten A, B, C zum Vorschein, ein Klick auf Produkte lässt die Unterseiten A, B, C wieder verschwinden und bringt die Unterseiten Hardware, Software, Zubehör unter Produkte. Der Klick auf Impressum klappt alle Unterseiten wieder ein. Die Unterseiten werden also nur dargestellt wenn man auf die entsprechende Hauptseite klickt, die Unterseiten enthält.

Bei vielen Links ist diese Variante übersichtlicher als alle Menüs auszuklappen und deren (Unter)Seiten anzuzeigen. Möchte man das dennoch erreichen, sollte man den Parameter expAll setzen, der alle Menüs ausklappt. So sieht der Webseiten Besucher auf den ersten Blick, was ihn unter den jeweiligen Rubriken erwartet. Die Formatierung der Unterseiten erfolgt hier durch Level 2 (2.NO=1). Für eine bessere Gliederung werden die Unterseiten optisch nach rechts eingerückt durch Verwendung anderer Klassen (menuTop2, menuTopMZ2).

Für DHTML Menüs mit Anzeige der Unterseiten in einem anderen Layer gibt es das Element TMENU_LAYERS.
Mehr Informationen bzw. Optionen in der Dokumentation:

http://www.typo3.net/tsref/menu_objects/tmenu/

Grafische Navigation mit HMENU und GMENU

Anstelle der Textbasierten Navigationsmenüs kann TYPO3 auch mit wenig Aufwand grafische Menüs mit Rollover Effekten automatisch auf der Struktur des Seitenbaums basierend realisieren. Dazu wird das Objekt GMENU anstelle von TMENU verwendet. GMENU basiert auf dem Objekt GIFBUILDER und wurde um zusätzliche Eigenschaften für ein Navigationsmenü erweitert. Das GIFBUILDER Objekt wurde in der Lektion IMAGE und FILE bereits erläutert. Hier nun ein Beispiel für eine grafische Navigation.

topNavTXT=TEXT
topNavTXT {
  text.field=title
  fontColor=#d6e3e7
  fontFile=fileadmin/fonts/verdana.ttf
  fontSize=15
  niceText=1
  offset=10,17
}

topNav=HMENU
topNav {
  special=directory
  special.value=21
  1=GMENU
  1.min=960
  1.NO=1
  1.NO {
    XY=[20.w]+20,[10.h]
    10 < decoMenuBG
    20 < topNavTXT
  }
  1.RO < .1.NO
  1.RO.20.fontColor=#f08b43
}

page.40 < topNav # Objekt anzeigen

Das erste Objekt topNavTXT ist die Definition für den Text, der hier im Menü vor einer Hintergrundgrafik gerendert werden soll. Als Textzug erhält das Objekt den Seitentitel (title) und verschiedene Schriftdefinitionen wie Font, Größe, Farbe usw. Der gewählte Font sollte vorher auf den Webserver unterhalb von fileadmin kopiert werden, da TYPO3 keine Fonts mitliefert. Unter Windows sind die Fonts im Unterverzeichnis Fonts zu finden. Es können alle TrueType Fonts (TTF) mit TYPO3 verwendet werden. Das Gute daran ist, dass auch exotische Fonts verwendet werden können ohne dass der Anwender diese Fonts auf seinem Rechner haben muss. Der lädt nur die fertigen Grafikdateien.

Die zusätzliche Option offset definiert den Offset des Fonts von der linken oberen Ecke der Hintergrundgrafik bzw. der Zeichenfläche des GIFBUILDER. Die Option niceText rendert die Grafik mit "weichen" Übergängen, auch als Glätten von Texten bezeichnet. So erscheint eine Grafik optisch ansprechender. Allerdings dauert das Rendern der Grafik auch länger. Grafiken werden nach dem Rendern in einem temp Verzeichnis gespeichert und nur neu gerendert, wenn sich die Definitionen ändern (Parameter in TypoScript) oder noch nicht existieren (für neue Seiten z.B.). Beim erstmaligen Rendern eines Menüs kann der Seitenaufruf durchaus sehr lange dauern, 30 bis 60 Sekunden sind hier wohl zu veranschlagen, abhängig von der Größe, der Webserver Leistung usw. Das sollte jedoch nicht abschrecken, da die Grafiken bis zur Änderung erhalten bleiben und die Erstellungszeit für den Anwender nicht mehr relevant ist.

Die Option min im GMENU definiert eine Mindestbreite. Normalerweise wird die Breite durch die Anzahl der Links und der Länge des Textes bestimmt. Meist ist bei einer horizontalen Navigation eine Anpassung an die Fensterbreite bzw. Containerbreite gewünscht. TYPO3 erstellt dann zum Schluss eine zusätzliche Grafik mit der notwendigen Breite, um die Gesamtbreite in min zu gewährleisten. In NO (Normalzustand) wird zuerst eine Grafik geladen, hier die bekannte Hintergrundgrafik decoMenuBG und anschließend das TEXT Objekt topNavTXT mit dem richtigen Seitentitel. Die Breite der Grafik ist variabel und hier wird die Breite des Textobjekt genommen [20.w] plus 20 Pixel extra (rechts und links 10 Pixel Abstand zur nächsten Grafik) und die Höhe des IMAGE Objektes decoMenuBG [10.h].

Für den Rollover Effekt wird das Objekt RO mit den Eigenschaften von NO kopiert (RO < .1.NO) und nur die Farbe des Textes geändert. Der nötige Javascript Code wird von TYPO3 automatisch in die gerenderte Seite integriert und mit den Grafiken fix und fertig verknüpft. Nicht vergessen das Script auf die aktuelle SeitenID (Hauptseite) anzupassen, im Script ist die Zeile fett markiert.

Ein weiteres Beispiel für ein vertikales Menü mit Grafik und den Unterseiten:

topNav=HMENU
topNav {
  special=directory
  special.value=21
  1=GMENU
  1.collapse=1
#  1.expAll=1
  1.NO=1
  1.NO {
    XY=180,[10.h]
    10 < decoMenuBG
    20 < topNavTXT
  }
  1.NO.wrap=|<br />
  1.RO < .1.NO
  1.RO.20.fontColor=#f08b43
  2 < .1
  2.NO.20.offset=20,17
#  2.RO.20.offset=20,17
}

page.40 < topNav # Objekt anzeigen

Hier werden die Grafiken untereinander angezeigt. Die Option collapse klappt die Menüs für die Unterseiten nur bei Anwahl der übergeordneten Seite aus und die Option expAll klappt alle Menüs auf. Das Zeichenfeld XY wird diesmal nicht auf eine variable sondern auf eine feste Breite gesetzt (180 Pixel). Zusätzlich erhält das NO Element noch einen Zeilenumbruch <br /> damit die Grafiken auch alle untereinander angezeigt werden. Bei der 2. Menü Ebene (Unterseiten) wird eine Einrückung durch Veränderung des offsets um 10 Pixel in der x Achse erzeugt. Beim Rollover Effekt wurde der offset auskommentiert. Das hat zur Folge, dass bei Überfahren des Menüpunkts mit der Maus sich nicht nur die Farbe ändert, sondern auch der Text nach links rückt.

Der Gestaltung mit GMENU sind praktisch kaum Grenzen gesetzt. Noch weitere Möglichkeiten hat man durch den Einsatz von GMENU_LAYERS für DHTML Menüs mit Layern, die dynamisch über den Seiteninhalt gelegt werden. Auch GMENU bietet noch einige weitere Optionen, die in der Dokumentation zu finden sind.

http://www.typo3.net/tsref/menu_objects/gmenu/

Weitere Optionen für HMENU

HMENU kennt noch zwei weitere Elemente für die Erzeugung von Navigationsmenüs, IMGMENU für die Verlinkung auf einer gemeinsamen Grafik wie z.B. Bundesländer auf einer Landkarte sowie Javascript Menüs mit JSMENU und einer platzsparenden Auswahl von Links aus einer SELECT Box. Dazu noch ein kleines Beispiel:

topNavJS = HMENU
topNavJS {
  special = directory
  special.value = 21
  1=JSMENU
  1.firstLabelGeneral=Bitte auswählen
}

page.40 < topNavJS # Objekt anzeigen

Ein wesentliches Attribut, welches die Funktionsweise von HMENU bestimmt, ist die Eigenschaft special. Die Standardoption ist directory.  Ein directory erstellt ein Inhaltsverzeichnis aller existierenden Seiten und je nach Einstellung (collapse, expall) auch deren Unterseiten. Wenn ein bestimmte Seite nicht in der Navigation angezeigt werden soll, kann man über die Seiteneigenschaft Zugriff -> "In Menüs verbergen" diese Seite von der automatisch erstellten Navigation ausschließen.

Über das Attribut includeNotInMenu=1 kann man solche Seiten auch in Menüs wieder einschließen. Mit der Option maxItems läßt sich die Anzahl der Menüelemente begrenzen und mit der Option begin kann man die Navigation an einer bestimmten Stelle starten. So lassen sich auf einer Seite mehrere, getrennte Navigationsbereiche erstellen. In dem folgenden Beispiel werden 2 Javascript Menüs (könnten auch GMENU oder TMENU Elemente sein) erzeugt, einmal mit den ersten 3 Links und ein zweites Menü mit den folgenden Links.

topNavJS = HMENU
topNavJS {
  special = directory
  special.value = 21
  includeNotInMenu=1
  maxItems=3
  1=JSMENU
  1.firstLabelGeneral=Bitte auswählen
}

topNavJS2 < topNavJS
topNavJS2 {
  begin=4
  maxItems >
}

page.40 < topNavJS
page.41 < topNavJS2

Mit excludeUidList kann man einzelne Seiten ausschliessen, in dem man die betreffenden SeitenIDs mit Komma getrennt angibt (Negativliste). Wählt man dagegen special=list kann man eine Positivliste mit den im Menü anzuzeigenden Seiten zeigen. Die Option updated erlaubt die Erstellung mit kürzlich aktualisierten Seiten (nach Datum rückwärts sortiert). Mit special=language kann eine Sprachauswahl und Umschaltung der aktuellen Sprache realisiert werden, sofern Content mehrsprachig erfasst wird. Und zu guter Letzt bietet die Option keyword die Möglichkeit, eine Navigation zu erstellen für Seiten, die bestimmte Suchbegriffe enthalten.

Weitere Informationen dazu in der Dokumentation
http://www.typo3.net/tsref/cobject/hmenu/

Navigationspfad mit HMENU anzeigen (breadcrumb)

Mit dem folgenden Script kann man einen Navigationspfad für den Besucher anzeigen, auf welcher Seite man sich befindet und wie man dorthin gelangt ist. Der Navigationspfad ist aktiv und man kann auch eine übergeordnete Kategorie per Klick auswählen. Diese Navigation (Anzeige) ist bei vielen Webseiten üblich und wird auch breadcrumb Navigation genannt, wie Brotkrümel die man auf den Weg in einem Labyrinth streuen kann, um den Weg wieder zurückzufinden.

topNavT=HMENU
topNavT {
  special=directory
  special.value=21
  1=TMENU
  1.expAll=1
  1.NO=1
  1.NO.ATagParams=class="menuTop"
  1.NO.wrapItemAndSub=<div class="menuTopMZ">|<br /></div>
  2.NO=1
  2.NO.ATagParams=class="menuTop2"
  2.NO.wrapItemAndSub=<div class="menuTopMZ2">|<br /></div>  
}

topNavPos=HMENU
topNavPos {
  special=rootline
  includeNotInMenu=1
  1=TMENU
  1 {
    noBlur=1
    NO=1
    NO.linkWrap=| > 
    CUR=1
    CUR.doNotLinkIt=1
  }
}
topNavPos.wrap=>> |

page.40 < topNavT
page.50 < topNavPos

Weitere Beispiele für Navigationen sind unter Tutorials zu finden.


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...