Hauptmenü
Das Erscheinungsbild des Hauptmenüs kann mit Easyconf oder über den Konstanten-Editor mit den Konstanten "Navigation Style" und "Navigation Title" angepasst werden.
Mit "Navigation Style" wird der Hintergrund der Navigation festgelegt:
- Default: Heller Hintergrund
- Inverse: Dunkler Hintergrund
- Default Transition, Inverse Transition: Transparent, wenn das Menü über dem oberen Inhalt ist (wird meistens im Zusammenhang mit einem Hintergrundbild verwendet)
Mit "Navigation Style" wird die Positionierung definiert:
- Nicht definiert: Menu scrollt mit Inhalt
- Top: Menü ist oben fixiert und wird beim Scrollen schmaler
TS Konstanten prüfen
Die im Konstanteneditor angezeigten Werte können von den aktiven Werten, welche zur Erstellung einer Seite verwendet werden, abweichen. Dies kann dann zutreffen, wenn die Konstanten über eine Bedingung gesetzt wurden. Zur eindeutigen Definition können Werte im Konstanten-Feld des Template-Datensatzes zugewiesen werden.
Ausgewählte Parametereinstellungen
| Navigation Style | Navigation Type | TS Konstanten | Beschreibung |
|---|---|---|---|
| Default | Default | page.theme.navigation.style = default page.theme.navigation.type > | Hell, scrollt mit Inhalt |
| Inverse | Default | page.theme.navigation.style = inverse page.theme.navigation.type > | Dunkel, scrollt mit Inhalt |
| Default | Top | page.theme.navigation.style = default page.theme.navigation.type = top | Hell, oben fixiert, wird schmaler beim Scrollen |
| Inverse | Top | page.theme.navigation.style = inverse page.theme.navigation.type = top | Dunkel, oben fixiert, wird schmaler beim Scrollen |
| Default Transition | Default | page.theme.navigation.style = default-transition page.theme.navigation.type > | Transparent, scrollt mit Inhalt |
| Default Transition | Top | page.theme.navigation.style = default-transition page.theme.navigation.type = top | Hell, oben transparent, oben fixiert, wird schmaler beim Scrollen |
| Inverse Transition | Top | page.theme.navigation.style = inverse-transition page.theme.navigation.type = top | Dunkel, oben transparent, oben fixiert, wird schmaler beim Scrollen |
Hintergrundbild
Um das Hauptmenü mit einem Hintergrundbild zu verwenden kann wie folgt vorgegangen werden:
- Dem Parameter "Navigation Style" den Wert default-transition oder inverse-transition zugeweisen
- Dem Seitenabschnitt "Rand" ein Karussell oder ein Bild zuweisen. Darauf achten, dass dem Inhaltselement kein Rahmen zugewiesen wird.
Wenn dem Seitenabschnitt "Rand" ein Bild zugewiesen wird, so kann dem Feld "Zusätzliche Klassen" (Register "Erscheinungsbild") die Klasse pp-below-header (Inhalt unter Kopfzeile schieben) zugewiesen werden. Wenn sich das Bild über die ganze Seitenbreite erstreckt, so sollte das Feld "Bildvarianten" auf den Wert "Ganze Seitenbreite" gesetzt werden.
Farbe anpassen
Die Farbgebung des Hauptmenüs kann über den Reiter "Farben" des Easyconf-Formulares angepasst werden.
Wenn das Menü einen Übergang-Stil besitzt so wird der Text weiss dargestellt. Um dies anzupassen, kann eine zusätzliche CSS-Definition bei den Seiteneigenschaften oder dem Easyconf-Formular hinterlegt werden:
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link, .navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link:hover, .navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link:focus { color: red !important; }
Startseite anderst
Häufig wird auf der Startseite ein Kopfbild mit überlagertem und auf den folgenden Seiten mit normalem Menü gewünscht. Dies kann mit folgender TS-Konstantendefinition erreicht werden:
page.theme.navigation {
style = default
type = top
}
[tree.level == 0]
page.theme.navigation {
style = default-transition
}
[end]
Siehe dazu auch Conditions.