Navigationsbeispiel: Hauptnavigation getrennt mit Logo mittig

Dieser Artikel beschreibt eine Umsetzung für eine Navigation, wie im Screen anbei veranschaulicht.

Für eine Darstellung einer Navigation, bei der die Hauptpunkte mittig getrennt vom Logo sein sollen, können Sie als Administrator auf Standardmittel zurückgreifen. Die BASE liefert Ihnen hierzu die Auswahlmöglichkeiten über den Kopfbereich und den Einsatz von Dekoratoren / Effekten.
Gehen Sie ausgehend von einer aktuellen BASE Projektbasis wie folgt vor:

Rufen Sie über das Weblication^® Panel den Layoutwizard auf (Schaltfläche "Layout anpassen"). Dort klicken Sie auf die Schaltfläche "Darstellung des Kopfbereiches anpassen", um die Maske für den Kopfbereich (header.scss) aufzurufen.
Wählen Sie hier folgende Einstellungen aus:

• Allgemein
  
  • Kopfbereichsvariante auswählen: Logo zentriert Navigation zentriert darunter
• Hauptnavigation
  
  • Hauptnavigation im Kopfbereich anzeigen: Ja
  • Vertikale Ausrichtung: Mittig
  • Horizontale Ausrichtung: Zentriert

Speichern Sie diese Einstellungen zum Kopfbereich.Sie sollten dann noch die Maske zum Seiten-Layout (page.scss) offen haben.

In der linken Spalte der IDE klicken Sie auf den Punkt "Dekoratoren / Effekte".
Aktivieren Sie dort über die Checkbox vor "Hauptnavigation mittig trennen" diesen Dekorator. Diverse Einstellungsmöglichkeiten zu diesem Dekorator können Sie per Klick auf den Eintrag selber vornehmen (z.B. "Navigationspunkt vor der die Navigation gesplittet werden soll").
Speichern Sie dann das Seiten-Layout ab.

Einen Artikel zu "Dekoratoren / Effekte" finden Sie unter Mouseover-Effekte und mehr für Navigationen über Dekoratoren.

Grundsätzlich haben Sie jetzt schon das erreicht, was im Screen dieses Artikels zu sehen ist. Die Hauptpunkte werden an der Stelle getrennt, welche in den Einstellungen zum Dekorator angegeben ist.

Wollen Sie links und rechts vom Logo eine eigenständige Navigationsdatei (z.B. wegen Bearbeitungsrechten von Redakteuren), empfiehlt sich ein Aufteilen der Standard-Navigation.

Legen Sie hierzu zwei neue Navigationen an, welche z.B. wie folgt benannt sind und jeweils einen Hauptpunkt haben:

• links.wNavigation.php
  Navigationspunkte:
  
  • Linke Navigation
    • LeftNavi P1
    • LeftNavi P2
• rechts.wNavigation.php
  
  • Rechte Navigation
    • RightNavi P1
    • RightNavi P2