Sidebar Navigation
Last updated
Last updated
Zusätzlich zu den üblichen Farben, kann auch der aktive Pfad (2) eingefärbt werden. Die :hover (3) Farben werden zusätzlich für das aktive Element verwendet.
Background (1) ist die allgemeine Hintergrundfarbe eines Menü-Elementes. Background:aktiver Pfad (4) legt die Farbe für die aktive Ebene fest. Dadurch kann der Kunde leichter unterscheiden in welchen Bereich welcher Ebene er tiefer navigieren kann. Background:hover (2) markiert das aktive obere Element und weitere Mouse-Over Aktionen über den Menü-Elementen.
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
Neben den Einstellungen für die Darstellung der Schrift kann auch ein vertikaler Innenabstand (1) gesetzt werden. Der Vertikale Innenabstand (1) bestimmt, wie hoch die einzelnen Menü-Einträge werden. Bei vielen Kategorien sollte ein möglichst kleiner Wert gewählt werden.
Durch die Option Abstand unten (2) können die einzelnen Elemente nochmal voneinander getrennt werden.
Der Anzeigemodus (3) bestimmt den Modus der Sidebar-Navigation. Im Modus Aufklappbar können die Unterkategorien auf- und zugeklappt werden, ohne die Seite zu wechseln.
Für das Auf- / Einklappen Icon (4) stehen Dir verschiedene Optionen bereit. Die Symbole werden angezeigt, sobald der Anzeigemodus auf Aufklappbar steht.
Mit Hilfe der Hover Animation (5) kann eine animierte Unterlinie bei Mouse-Over und Aktiv-Status ab der zweiten Navigations-Ebene dargestellt werden.
Beispiele:
