Header
Die Navigationsleiste ist ein verbindendes Element, durch das ein Wiedererkennungswert beim Nutzer geschaffen wird. Daher sollte diese auf allen Südkurier-Seiten gleich aussehen. Die Navigationsleiste geht auf allen Seiten Mobile + Desktop immer über die gesamte Seitenbreite. Dies ist unabhängig von der Contentbreite der jeweiligen Seite.
Entwicklungs-Ansicht ist gerade in Bearbeitung
Mobile
Die Navigationsleiste sollte im mobilen die folgenden 4 Elemente beinhalten. Wenn der Platz aufgrund des Logos oder anderer Elemente im Menü nicht ausreicht, kann die „Menü“-Beschriftung auf sehr kleinen Screens ausgeblendet werden.
Hamburger-Menu: Für Mobile wird eine verkleinerte Version des Icons verwendet.
Bezeichnung „Menü“: Bezeichnung ist bei Mobile mit 16px etwas kleiner.
Logo: Das Logo ist in der mobilen Ansicht ebenfalls etwas kleiner
Anmelde-Button: Für Mobile wird hier der Small-Button verwendet
Abstände Mobile
Responsive
Da jede einzelne Webseite unterschiedliche Interaktionselemente hat und sich auch der Umfang an Elementen deutlich unterscheidet kann es an dieser Stelle keine einheitlichen Angaben zum gesamten responsiven Verhalten der Navigationsleisten geben. Was bei allen SK-Seiten gleich sein sollte ist die Darstellung von Mobile bis zu einer Breite von 1400px. Hierbei gibt es einen festen Breakpoint bei 750px. Elemente und Abstände entsprechen hier bereits der Darstellung bei Desktop.
Bis 749px
750px bis 1400 px
Desktop
Sobald ausreichend Platz verfügbar ist, sollten die Navigationspunkte in der horizontalen Navigation zu finden sein, um eine schnellere Orientierung zu schaffen. Das Hambuger-Icon + „Menü“ - Beschriftung kann dann auch ausgeblendet werden. Diese Entscheidung ist abhängig von der Größe des Menüs und sollte im Rahmen der jeweiligen Webseite getroffen werden.
Hamburger-Menu: Das Hamburger Menü ist auf allen Seiten oben links zu finden. In der Regel ist dieses für mobile Geräte gedacht, es kann aber bei allen Display-Größen eingebaut werden.
Menü-Label: „Menü“ Rechts neben dem Menü-Icon steht immer das Wort „Menü“ in 18px.
Logo: Das Logo ist auf allen SK-Seiten rechts daneben zu finden
Menü-Punkte: Die Menü-Punkte können entweder linksbüdig oder zentriert platziert werden. Bei einer linksbündigen Platzierung ist zischen dem Logo und dem Menü noch ein Trenner zu setzen.
Anmelde-Button: Der Anmelde-Button ist auf allen Seiten immer rechts in der Navigationsleiste zu finden. Die Beschriftung des Anmelde-Buttons ist immer „Anmelden“.
Abstände
2. Navigationsebene
Bei großen Menüs kann eine 2. Navigationsebene unter der Hauptnavigation eingesetzt werden. Bestandteil der 2. Navigationseben kann auch eine Suche sein.
Sub-Links: In der 2. Navigationsebene sind die Unterpunkte zur Hauptnavigation aufgeführt.
Suche: Wenn eine Suche für eine bessere Sichtbarkeit in der Navigationsleiste platziert werden soll, ist diese hier rechts zu platzieren. Genaueres dazu steht im Bereich Suche.
Abstände
Darstellung der Menü-Links
Die Menü-Links können entweder linksbündig oder zentriert dargestellt sein. Bei einer linksbündigen Ausrichtung ist auf den Trenner zwischen Logo und Menü-Punkten zu achten. Für Hover- und Active-States der Menüpunkte gibt es die folgenden zwei Varianten.
Linksbündig
Zentriert
Variante 1: Hover, Active
Variante 2: Hover, Active
