Eigene Navigationsmenüs

Kontakt

Volker Burggräf
Internetkoordinator

Eigene Navigationsmenüs

Auf Übersichtsseiten kann es sinnvoll sein, bestimmte Navigationsmenüs im Seiteninhalt selbst an geeigneter Stelle einzusetzen. TYPO3 bietet mehrere Arten von Menüs an, die hier anhand von Beispielen gezeigt werden.

Die eigenen, im Seiteninhalt platzierten Navigationsmenüs können die automatischen Navigationsmenüs (Subnavigationsmenü und Projektnavigation), die TYPO3 in der Seitenspalte der Webseiten anzeigt, ergänzen oder ersetzen.

Video der Schulung zu eigenen Navigationsmenüs

In einer Online-Schulung zu eigenen Navigationsmenüs wurden die verschiedenen Menütypen, die TYPO3 anbietet, vorgestellt und ihre Einsatzmöglichkeiten anhand von Beispielen gegenübergestellt.

Hinweis: Das Video ist nur für Angehörige der Universität aufrufbar.

  • Einstieg: Automatische Menüs (Subnavigation, Projektnavigation) vs. manuelle Menüs (0'00")
  • Zusammenfassungen (6'10")
  • Linkliste als Buttons (10'12")
  • Kategorisierte Seiten (16'50")
  • Unterseiten (20'36")
  • Unterseiten inkl. Seiteninhalt (24'12")
  • Sitemap der ausgewählten Seiten (28'10")
  • Menü der ausgewählten Seiten (30'54")
  • Neulich aktualisierte Seiten (33'16")
  • Der Sektionsindex – Sprungmenü innerhalb von Seiten (nicht mehr empfohlen) (37'41")

Menü: Zusammenfassungen

Listet Unterseiten auf mit Titel und Zusammenfassung (aus dem Reiter [Metadaten])

  • Einrichtungslogo
  • Text-Inhalte

    Hier können Texte, Listen, Tabellen usw. eingebunden werden - vergleichbar einem Word-Dokument
  • Buttons

    Buttons sind nichts anderes als optisch "aufgemotzte" Hyperlinks. Die Formatierung als Button kann einen Hyperlink sichtbarer und auch besser navigierbar machen - insbesondere auf Smartphones.
  • Bilder mit/ohne Text

    Ein einzelnes Bild oder mehrere Bilder können in TYPO3 aus der Medienverwaltung heraus in Webseiten eingebunden und bei Bedarf mit zugehörigem Text über- oder nebeneinander arrangiert werden. Die Möglichkeit zur Vergabe von Bildunterschriften und Links sowie eine Klick-Vergrößerungsfunktion ist gleich mit dabei.
  • Bildergalerien und Slider

    Eine Serie von Bildern kann als Galerie aus kleinen Bildminiaturen dargestellt werden, die sich bei Mausklick in einem so genannten Lightbox-Fenster öffnen.
  • Videos und Audios

    Medien wie Audios und Videos können in die Webseiten eingebunden werden - entweder als eigene MP3- oder MP4-Dateien oder direkt von Youtube oder Vimeo.
  • Datei-Downloads

    Wenn Dateien zum Download angeboten werden sollen, empfiehlt sich die Verwendung des Dateilinks-Plugins. Es können automatisch passende Dateisymbole oder Miniaturgrafiken angezeigt werden.
  • Kontaktdaten

    Kontaktdaten der Uni-Angehörigen brauchen nicht manuell und ggfs. mehrfach in Webseiten eingegeben zu werden. Stattdessen gibt es ein TYPO3-Plugin, welches die die Konkaktdaten inkl. Lehrveranstaltungsinfos komfortabel aus Stud.IP ausliest, so dass sie nur noch dort gepflegt werden müssen.
  • Stud.IP Personen-Plugins

    Mittels Anbindung an Stud.IP können Daten von Personen und Lehrveranstaltungen in die Webseiten eingebunden werden.
  • Kalender

    Kalendertermine (auch als Serientermine) erfassen und in der Webseite als blätterbare Ansicht, Listenansicht und Detailansicht anzeigen. Vergangene Termine werden werden automatisch ausgeblendet.
  • News (Nachrichten-Modul)
  • Landkarten / Adressen

    Eine dynamische Landkarte in der Webseite darstellen und bei Bedarf Markierungen mit Info-Popus darauf platzieren.
  • Eingabeformulare

    Selbst gestaltbare Eingabeformulare, deren Inhalte beim Absenden an eine bestimmte Mailadresse geschickt werden.
  • Eigene Navigationsmenüs
  • Publikationslisten
  • Mathematische Formeln

    Darstellung mathematischer Formeln, z.B. mit Brüchen, Wurzeln usw.
  • Elemente formatieren und anordnen

    Inhaltsbausteine können zwecks Abgrenzung oder Hervorhebung mit Rahmenlinien oder Hintergrundfarben versehen sowie auf-/zuklappbar gemacht werden.
  • Stud.IP ZSKB-Plugins

Menü: Kategorisierte Seiten

Zeigt alle Seiten an, die eine oder mehrere bestimmte Kategorie(n) haben

Menü: Unterseiten der ausgewählten Seiten inkl. Seiteninhalt

Listet die Unterseiten und deren Binnennavigation auf

Menü: Ausgewählte Seiten

Ein manuell zusammengestelltes Menü aus bestimmten Webseiten

Menü: Sektionsindex

Sprungliste zu Zielen innerhalb einer oder mehrerer Seite(n)

Wichtige Hinweise vorab

Der Sektionsindex (Sprungmenü) ist in dieser Form ein eher altertümliches Mittel. Wenn eine Seite sehr viele Inhalte hat, sodass eine Themenübersicht sinnvoll ist, sollte überlegt werden, stattdessen mit Aufklappelementen zu arbeiten. Die Aufklapp-Buttons erfüllen eine vergleichbare Funktion wie ein Menü, jedoch springt man dann nicht innerhalb der Seite, sondern die gewünschten Inhalte öffnen sich durch das Aufklappen direkt an der aktuellen Position – diese Vorgehensweise ist zu bevorzugen.

Der Sektionsindex funktioniert nicht korrekt bei Elementen, die sich innerhalb von Rasterelementen (z. B. Spaltenkonstrukte oder geschachtelte Aufklappelemente) befinden! Die Position der Einträge in der Sprungliste entspricht dann nicht der tatsächlichen Position innerhalb der Webseite.

Im folgenden Beispiel wurden diese Konfigurationen vorgenommen:

  • Dem Element wurde die CSS-Klasse indent zugewiesen. Damit werden die einzelnen Links gemäß ihrer Hierarchie (= Überschrift-Typ) eingerückt.
  • Im Feld „Ausgewählte Seiten” wurde explizit eine andere Seite ausgewählt. Dadurch wird das Sprungmenü für die Inhalte jener ausgewählten Seite angezeigt, die Links führen also zu der Seite und innerhalb davon zum jeweiligen Inhaltselement.

Dieselben Menüs mit Erscheinungsbild "Linkliste als Buttons"

Menü: Zusammenfassungen

Listet Unterseiten auf mit Titel und Zusammenfassung (aus dem Reiter [Metadaten])

  • Einrichtungslogo
  • Text-Inhalte

    Hier können Texte, Listen, Tabellen usw. eingebunden werden - vergleichbar einem Word-Dokument
  • Buttons

    Buttons sind nichts anderes als optisch "aufgemotzte" Hyperlinks. Die Formatierung als Button kann einen Hyperlink sichtbarer und auch besser navigierbar machen - insbesondere auf Smartphones.
  • Bilder mit/ohne Text

    Ein einzelnes Bild oder mehrere Bilder können in TYPO3 aus der Medienverwaltung heraus in Webseiten eingebunden und bei Bedarf mit zugehörigem Text über- oder nebeneinander arrangiert werden. Die Möglichkeit zur Vergabe von Bildunterschriften und Links sowie eine Klick-Vergrößerungsfunktion ist gleich mit dabei.
  • Bildergalerien und Slider

    Eine Serie von Bildern kann als Galerie aus kleinen Bildminiaturen dargestellt werden, die sich bei Mausklick in einem so genannten Lightbox-Fenster öffnen.
  • Videos und Audios

    Medien wie Audios und Videos können in die Webseiten eingebunden werden - entweder als eigene MP3- oder MP4-Dateien oder direkt von Youtube oder Vimeo.
  • Datei-Downloads

    Wenn Dateien zum Download angeboten werden sollen, empfiehlt sich die Verwendung des Dateilinks-Plugins. Es können automatisch passende Dateisymbole oder Miniaturgrafiken angezeigt werden.
  • Kontaktdaten

    Kontaktdaten der Uni-Angehörigen brauchen nicht manuell und ggfs. mehrfach in Webseiten eingegeben zu werden. Stattdessen gibt es ein TYPO3-Plugin, welches die die Konkaktdaten inkl. Lehrveranstaltungsinfos komfortabel aus Stud.IP ausliest, so dass sie nur noch dort gepflegt werden müssen.
  • Stud.IP Personen-Plugins

    Mittels Anbindung an Stud.IP können Daten von Personen und Lehrveranstaltungen in die Webseiten eingebunden werden.
  • Kalender

    Kalendertermine (auch als Serientermine) erfassen und in der Webseite als blätterbare Ansicht, Listenansicht und Detailansicht anzeigen. Vergangene Termine werden werden automatisch ausgeblendet.
  • News (Nachrichten-Modul)
  • Landkarten / Adressen

    Eine dynamische Landkarte in der Webseite darstellen und bei Bedarf Markierungen mit Info-Popus darauf platzieren.
  • Eingabeformulare

    Selbst gestaltbare Eingabeformulare, deren Inhalte beim Absenden an eine bestimmte Mailadresse geschickt werden.
  • Eigene Navigationsmenüs
  • Publikationslisten
  • Mathematische Formeln

    Darstellung mathematischer Formeln, z.B. mit Brüchen, Wurzeln usw.
  • Elemente formatieren und anordnen

    Inhaltsbausteine können zwecks Abgrenzung oder Hervorhebung mit Rahmenlinien oder Hintergrundfarben versehen sowie auf-/zuklappbar gemacht werden.
  • Stud.IP ZSKB-Plugins

Menü: Kategorisierte Seiten

Zeigt alle Seiten an, die eine oder mehrere bestimmte Kategorie(n) haben

Menü: Unterseiten der ausgewählten Seiten inkl. Seiteninhalt

Listet die Unterseiten und deren Binnennavigation auf

Menü: Ausgewählte Seiten

Ein manuell zusammengestelltes Menü aus bestimmten Webseiten

Menü: Sektionsindex

Sprungliste zu Zielen innerhalb einer oder mehrerer Seite(n)

Wichtige Hinweise vorab

Der Sektionsindex (Sprungmenü) ist in dieser Form ein eher altertümliches Mittel. Wenn eine Seite sehr viele Inhalte hat, sodass eine Themenübersicht sinnvoll ist, sollte überlegt werden, stattdessen mit Aufklappelementen zu arbeiten. Die Aufklapp-Buttons erfüllen eine vergleichbare Funktion wie ein Menü, jedoch springt man dann nicht innerhalb der Seite, sondern die gewünschten Inhalte öffnen sich durch das Aufklappen direkt an der aktuellen Position – diese Vorgehensweise ist zu bevorzugen.

Der Sektionsindex funktioniert nicht korrekt bei Elementen, die sich innerhalb von Rasterelementen (z. B. Spaltenkonstrukte oder geschachtelte Aufklappelemente) befinden! Die Position der Einträge in der Sprungliste entspricht dann nicht der tatsächlichen Position innerhalb der Webseite.

Im folgenden Beispiel wurden diese Konfigurationen vorgenommen:

  • Dem Element wurde die CSS-Klasse indent zugewiesen. Damit werden die einzelnen Links gemäß ihrer Hierarchie (= Überschrift-Typ) eingerückt.
  • Im Feld „Ausgewählte Seiten” wurde explizit eine andere Seite ausgewählt. Dadurch wird das Sprungmenü für die Inhalte jener ausgewählten Seite angezeigt, die Links führen also zu der Seite und innerhalb davon zum jeweiligen Inhaltselement.
Internetkoordinator (Stand: 02.07.2024)  | 
Zum Seitananfang scrollen Scroll to the top of the page