Navigationsbeispiel: Hauptnavigation getrennt mit Logo mittig

Navigationsbeispiele erleichtern Ihnen die Umsetzung Ihrer aktuellen und künftigen Projekte.

Hauptnavigation getrennt, Logo mittig
Hauptnavigation getrennt, 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:

Schritt 1: Layout anpassen - Darstellung des Kopfbereichs anpassen

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.

Schritt 2: Layout anpassen - Dekoratoren / Effekte

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.

Weitere Tipps

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.

Getrennte linke und rechte Navigation

Hauptnavigation getrennt, Logo mittig
Hauptnavigation getrennt, Logo mittig

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
Standard-Navigation (standard.wNavigation.php)
Standard-Navigation (standard.wNavigation.php)

Die Standard-Hauptnavigation (standard.wNavigation.php) ändern Sie wie folgt ab und hat somit nur diese beiden Hauptpunkte:

  • Hauptpunkt 1 mit z.B. Text "Links" und Link zur links.wNavigation.php
  • Hauptpunkt 2 mit z.B. Text "Rechts" und Link zur rechts.wNavigation.php

Der Text des Navigationspunktes in der Hauptnavigation ist dabei nicht wichtig, da in der Ausgabe der Text des ersten Hauptpunktes der angegebenen Navigationsdatei (z.B. "Linke Navigation") gesetzt wird.