Alle Seiten
Bereitgestellt von GitBook
1 von 2

Loading...

Loading...

Top-Navigation

Konfiguration


Top-Navigation

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Liste anzeigen • Hamburger-Menü anzeigen

Beispiel Wert: Liste anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation"

Technischer Name: twt-nav-main-show

Basiskonfiguration


Home-Link anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Text (Standard) • Icon

Beispiel Wert: Text (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (ThemeWare®-Stil) • anzeigen (Standard)

Beispiel Wert: anzeigen (ThemeWare®-Stil)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-arrows-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • farbig hinterlegen (inkl. Home-Link) • farbig hinterlegen (exkl. Home-Link) • unterstreichen (mittig nach links und rechts) • unterstreichen (von links nach rechts) • unterstreichen (von rechts nach links) • unterstreichen

Beispiel Wert: farbig hinterlegen (inkl. Home-Link)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-hover-type


Feldtyp: Nummernfeld

Beispiel Wert: 60

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-height


Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-left


Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-right


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

Technischer Name: twt-nav-main-width


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border


Feldtyp: Auswahlfeld

Verfügbare Werte: • Text • Überschriften

Beispiel Wert: Text

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-family


Feldtyp: Nummernfeld

Beispiel Wert: 18

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-size


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight


Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight-active


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-justify-content


Feldtyp: Auswahlfeld

Verfügbare Werte: • keine • Großschreibung • Kleinschreibung • Wortanfang in Großbuchstaben

Beispiel Wert: keine

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-text-transform


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-active


Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-link-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color


Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-active


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-active


Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-active

Home-Link

Pfeile anzeigen

Zeigt einen Pfeil nach unten neben dem Menüpunkt, wenn Unterkategorien vorhanden sind.

Hover-Effekt

Bei einer links ausgerichteten Top-Navigation empfehlen wir den Hover-Effekt "farbig hinterlegen (exkl. Home-Link)" statt "farbig hinterlegen (inkl. Home-Link)".

Höhe

Innenabstand (Menüpunkte)

Gebe den gewünschten Abstand für die Menüpunkte ein.

Innenabstand unten

Gebe den gewünschten Abstand nach unten für die Top-Navigation ein.

Außenabstand links @Tablet (≥992px)

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Außenabstand rechts @Tablet (≥992px)

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Basis-Header "Header 1" and "Header 2"

Breite

Wähle den Größenmodus der "Top-Navigation" aus.

Standard: Die Breite der "Top-Navigation" orientiert sich an der Konfiguration der Breite des Headers.

Hinweis: Diese Konfiguration gilt nicht im Grundlayout "boxed".

Farbkonfiguration

Hintergrundfarbe (Navigation)

Rahmenfarbe

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "Standard".

Rahmenfarbe (unterstreichen) @hover

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "unterstreichen".

Rahmenfarbe (Trennstrich)

Typografie

Schriftart

Schriftgröße

Strichstärke

Strichstärke @active

Textausrichtung

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

Textformatierung

Menüpunkt (Home-Link)

Farbe (Home-Link)

Farbe (Home-Link) @hover

Farbe (Home-Link) @active

Menüpunkt

Textfarbe

Textfarbe @hover

Textfarbe @active

Iconfarbe

Iconfarbe @hover

Iconfarbe @active

Hintergrundfarbe

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Menüpunkt (hervorgehoben)

Textfarbe (hervorgehoben)

Textfarbe (hervorgehoben) @hover

Textfarbe (hervorgehoben) @active

Iconfarbe (hervorgehoben)

Iconfarbe (hervorgehoben) @hover

Iconfarbe (hervorgehoben) @active

Hintergrundfarbe (hervorgehoben)

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe (hervorgehoben) @hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe (hervorgehoben) @active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".