Navigation und Service

Hauptnavigation

Die Themen der zweiten Navigationsebene innerhalb der Hauptnavigation sind über Flyouts erreichbar. Sie werden beim Rollover über den jeweiligen Menüpunkt in der Hauptnavigation sichtbar.

Für die Gestaltung der Flyouts gibt es verschiedene Optionen.

Variante 1: Flyout mit Text

Die Abbildung zeigt das Flyout in Weiß Flyout in Weiß


  • Farbe des Menüpunkts ändert sich bei Rollover und bei Auswahl des Menüpunkts in die ausgewählte Farbe. Hierbei ist auf die Barrierefreiheit der Farbe zu achten. Alternativ wird die Schriftfarbe der Hauptnavigation beibehalten.
  • Kleines weißes Dreieck erscheint beim Rollover über einen Menüpunkt und bleibt sichtbar, wenn ein Menüpunkt angewählt wurde.
  • Schriftschnitt und Schriftfarbe der Menüpunkte im Flyout sind identisch mit den Hauptnavigationspunkten, die Schriftgröße ist mindestens 2 pt kleiner als die der Hauptnavigation. Hinterlegung der Menüpunkte beim Rollover.
  • Flyout kann in Weiß oder Schwarz eingesetzt werden.


Variante 2: Flyout mit Bild/Text/Teaser

Die Abbildung zeigt ein Beispiel für die Navigation Abbildung 1



Die Abbildung zeigt ein Beispiel für die Navigation Abbildung 2


Das Flyout verläuft stets über die gesamte Darstellungsfläche. Es kann die Bühne und alle nachfolgenden Seiteninhalte nach unten verdrängen (Abbildung 1) oder legt sich als Ebene mit Schattenkante über die Bühne (Abbildung 2).

Für beide Varianten gibt es zahlreiche Umsetzungsmöglichkeiten:

Die Abbildung zeigt eine Variante der Navigation


  • Headline mit Einleitungstext
  • Menüpunkte werden durch Haarlinien getrennt
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt eine Variante der Navigation


  • Headline

  • Menüpunkte werden durch Haarlinien getrennt
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Headline

  • Menüpunkte werden durch Haarlinien getrennt
  • Text-Teaser kann auf ein Highlight des Bereichs hinweisen: Teaserfarbe: Weiß, Bestandteile des Teasers: Bereichskennzeichnung, Headline, kurzer Text, Mehr-Link
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Headline

  • Menüpunkte werden durch Haarlinien getrennt
  • Bild-Text-Teaser kann auf ein Highlight des Bereichs hinweisen: Teaserfarbe: Weiß, Bestandteile des Teasers: Foto, Bereichskennzeichnung, Headline, kurzer Text, komplett verlinkt
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Headline

  • Menüpunkte werden durch Haarlinien getrennt
  • Video-Teaser kann auf ein Video-Highlight des Bereichs hinweisen: Bestandteile des Teasers: Vorschaubild und Play-Button, komplett verlinkt, Video öffnet sich in Lightbox
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Headline

  • Maximal sieben Menüpunkte, bestehend aus aussagekräftigen Icons und entsprechenden Beschriftungen im Grauton der Hauptnavigationspunkte
  • Beim Rollover wechselt die Farbe zur jeweils ausgewählten Farbe.
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Gliederung der Unterbereiche durch Headlines
  • Menüpunkte werden durch Haarlinien getrennt
  • Schließen-Button (optional für Mobile-User)

Die Abbildung zeigt ein Beispiel für die Navigation


  • Menüpunkte können durch aussagekräftige Bilder (keine Grafik, nur Fotos!) ergänzt werden
  • Menüpunkte durch Haarlinien getrennt
  • Schließen-Button (optional für Mobile-User)