Menü-Navigationen: Mehrere Varianten für Öffner auswählbar

Veröffentlichungsdatum: 03. März 2023
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Mit der aktuellen BASE stehen ab CMS-Version 17 mehrere Varianten für den Öffner der Menü-Navigation zur Auswahl.

Menü-Navigation Schaltfläche Icon / Text
Menü-Navigation Schaltfläche Icon / Text

Die Darstellung der Menü-Navigation erlaubt aktuell folgende unterschiedlichen Auswahlmöglichkeiten:

  • Icon,
  • Icon mit Text
  • Schaltfläche mit Icon
  • Schatlfläche mit Icon und Text

Im Screen sehen Sie die zuletzt genannte Möglichkeit als Umsetzung.

Gewünschte Menü-Navigation wählen

Kopfbereich bearbeiten - Hauptnavigation
Kopfbereich bearbeiten - Hauptnavigation

Um die Menü-Navigation einzustellen, öffnen Sie über das Weblication® Panel den Layout-Wizard über "Layout anpassen". Im Block "Kopfbereich" klicken Sie auf die Schaltfläche "Darstellung des Kopfbereichs anpassen", um die Bearbeitung des Kopfbereichs (header.scss) zu öffnen.

Im Block "Hauptnavigation" können Sie diverse Einstellungen zur Hauptnavigation vornehmen.
Z.B. können Sie die Auswahl "Bei breitem Bildschirm", welche standardmässig auf "Vollständige Navigation" steht auf "Menünavigation, wie Mobil" setzen, um die Toggler-Navigation schon auf breiten Bildschirmen (Desktop) zu haben.
Die Darstellung der Menü-Navigation können Sie unter "Darstellung des Öffners" auswählen.

Nachrüsten in älteren BASE-Projekten

Ein Nachrüsten in älteren BASE Projekten ist möglich, muss aber manuell erfolgen. Je nach Alter des bestehenden Projektes kann der Aufwand unterschiedlich sein. Nachfolgend geht der Artikel auf eine Projekt-Installation ein, welche nicht älter als ein paar Monate ist. Die Struktur des Projektes sollte also zumindest eine eigene SCSS-Datei für den Kopfbereich haben (header.scss).

Ohne Gewähr, daß dies bei jedem - individuell angepassten - BASE-Projekt so möglich ist, nachfolgend eine kurze Schritt-für-Schritt Anleitung.

  1. Legen Sie sicherheitshalber ein Backup des Global-Projektes (z.B. /default-wGlobal) an, um im Problemfall wieder darauf zurückgreifen zu können
    (siehe hierzu auch: Tipps zu Backups / Sicherungen)
  2. Rufen Sie die Weblics® Verwaltung und dort das Register "Alle Weblics" auf und stossen ein Weblic® Update zum Weblic® "BASE allgemeine CSS Dateien" an
  3. Im Aktivierungsschritt aktivieren Sie die Checkbox zum Dateipfad der header.scss
    Hier können Sie durch Klick auf die Schaltfläche "Änderungen anzeigen" eine Vergleichsansicht öffnen, über welche Sie sehen, welche Änderungen die aktuelle Fassung mit sich bringt und was Sie ggf. individuell gesetzt haben. Maßgebend für die neue Menü-Navigation sind die Einträge zu $navigationMenuTogglerType.
    Tipp: Wenn Sie das Fenster mit der Änderungsanzeige geöffnet lassen, können Sie nach dem nächsten Schritt die individuellen Anpassung in der Regel leicht wieder übernehmen.
    In der Auflistung sollten zudem die neuen Navigationsvarianten für die Menü-Navigation in schwarzer Schrift erscheinen und bereits angehakt sein (navigationMainTogglerButtonIcon.scss, navigationMainTogglerButtonIconText.scss, navigationMainTogglerIcon.scss, navigationMainTogglerIconText.scss)
  4. Führen Sie das Weblic® Update durch Klick auf die Schaltfläche "Weblic mit den ausgewählten Komponenten aktivieren" durch.
    Hinweis: Die in orangener Schriftfarbe angezeigten SCSS-Dateien können Sie aktiviert lassen und sind dazu somit auch auf aktuellem Stand
  5. Stellen Sie die Navigation wie gewünscht ein

Je nach Projekt kann es noch erforderlich sein, daß die verwendete SCSS-Datei für die Layer-Navigation auch aktualisiert werden muss (z.B. navigationMainMenuOverlap.scss).