Der Navigationsbereich muss immer vorhanden sein, sonst bist du nicht in der Lage die einzelnen Seiten deiner Homepage im Browser aufzurufen.
Die horizontale Navigation hat einen eigenen Bereich so wie ein Header. Diesen Bereich kannst du mit den Mitteln des Design-Editors frei gestalten, also einen Hintergrund festlegen, Linien einbauen und vieles mehr. Die Höhe des Navigationsbereich ist flexibel und wird von der Art der Navigation, der Schriftgröße und den Einstellungen beeinflusst. Es gibt zwei Ausnahmen: Wenn du eine Navigation in einem Header platzierst, dann hat die Navigation dort keinen eigenen Bereich mehr, den man gestalten kann. Die Navigation hat dann immer einen durchsichtigen Hintergrund. Auch eine Navigation, die du in einer Sidebar anlegst, hat keinen eigenen Bereich, sondern ist in einem durchsichtigen Feld eingebaut.
Du kannst zwischen zwei Navigationstypen wählen: einer horizontalen und einer vertikalen Navigation. Bei page4 bist du außerdem in der Lage, eine Kombination dieser beiden Typen zu verwenden. Das System regelt die Verteilung der Seiten automatisch.
Das Design der Navigation im Design-Editor gestalten
Das Menü ist ziemlich umfangreich, da du sehr viele Einstellungen vornehmen kannst. Aber wenn man es erstmal grundsätzlich verstanden hat, ist es sehr leicht zu bedienen.
Auf der linken Seite gibt es zwei Menü-Einträge: Hauptnavigation und Unternavigation (2).
Jede Navigation besteht grundsätzlich aus Ebenen. Die Hauptebene und eventuell mehreren Unterebenen. Wenn man eine Navigation nur horizontal anlegt, dann werden die Unterebenen über ein Aufklappmenü angezeigt. Die Einstellung solch einer Navigation wird immer über den Punkt "Hauptnavigation" Inkl. der Unterebenen vorgenommen. Verwendet man nur eine Navigation in der Sidebar ist es ähnlich. Die Unterseiten werden ebenfalls in der Sidebar angezeigt und auch hier benutzt man nur den Punkt "Hauptnavigation", um alles einzustellen.
Sobald man eine geteilte Navigation benutzt braucht man beide Menü-Enträge. Geteilt bedeutet, die Hauptebene ist horizontal angelegt und alle Unterebenen werden in der Sidebar angezeigt. In diesem Fall stellt man für die Hauptnavigation nur die Hauptebene ein (da die weiteren Einstellungen für das Aufklappmenü sind, welches nicht angezeigt wird) und in der Unternavigation stellt man dann die weiteren Ebenen ein.
Mit dem Button "Position wählen" kann man festlegen, wo im Design die Navigation angelegt werden soll. Alle Bereiche, in denen eine Navigation verankert werden kann, werden durch Platzhalter angezeigt.
Die aktuelle Position der Navigation wird grün markiert (1). Wird die Navigation innerhalb eines Bereiches platziert wird neben den Platzhaltern <<>> ein Pfeil angezeigt (2). Das betrifft die Header und die Sidebars. Es bedeutet, der Navigationsbereich kann dann keine eigene Hintergrundfarbe bekommen. Alle anderen Positionen (3) haben nur die Platzhalter <<>>. Wird dort eine Navigation eingefügt kann sie eine Hintergrundfarbe bekommen und der Bereich kann sogar mit einem Bild hinterlegt werden.
Hat man die Hauptnavigation positioniert, werden dort alle Seiten angezeigt, also auch die Unterseiten. Wenn man dann für die Unternavigation ebenfalls eine Position festlegt, werden automatisch die Unterseiten der Hauptnavigation in der Unternavigation angezeigt. Löscht beziehungsweise entfernt (3) man die Unternavigation, gehen natürlich keine Seiten verloren, die Hauptnavigation übernimmt dann wieder die Aufgabe alle Seiten anzuzeigen.
Möchte man den Dialog zum Platzieren einer Navigation verlassen ohne die aktuellen Positionen zu verändern klickt man entweder auf die grüne Markierung, also da wo sich die Navigation aktuell befindet oder einfach außerhalb des Dialogs.
Templates (5) für die Navigation
Das Aussehen einer Navigation hängt davon, welche Einstellungen (Schrift, Farbe usw.) du vorgibst und es wird vom Template beeinflusst. Jedes Template hat andere Parameter und Vorgaben. Es kann also sein, dass bestimmte Einstellungen keine Auswirkungen haben, weil das ausgewählte Template diese Einstellungen nicht unterstützt oder überschreibt.
Es gibt Template für vertikale Navigationen:
und für horizontale Navigationen:
Allgemeine Optionen (6) der Navigation
Mit den Optionen (6) kannst du das Aussehen und auch die Platzierung noch anpassen. Über den Außenabstand kannst du den Bereich der Navigation erweitern und festlegen, wo die Einträge platziert werden. Gibst du zum Beispiel 20 px für den oberen Abstand ein, dann erweitert sich der Bereich nur nach oben und die Navigation rutscht optisch nach unten.
Mit der Ausrichtung kannst du deine Navigation nach links oder rechts rücken. Manchmal kann es sein, dass diese Einstellung erst sichtbar wird, wenn du den Design-Editor beendest. Vergiss das Speichern nicht.
Die farbliche Gestaltung deiner Navigation
Du kannst die ersten drei Ebenen deiner Navigation gestalten. Alle weiteren Ebenen übernehmen die Gestaltung der dritten Ebene.
Es gibt folgende Parameter:
(1) Die Schrift der Navigation. Du gibst vor, welche Schriftart und welche Schriftgröße du verwenden willst. Diese Einstellung wird für die Hauptebene verwendet. Alle anderen Ebenen bekommen die selbe Schrift, die Schriftgröße wird bei den weiteren Ebenen automatisch verkleinert.
(2) Du kannst den Dialog umschalten für die drei Ebenen, welche du gestalten kannst.
(3) Ebenso gibt es Einstellungen für drei "Zustände". Normal ist der Zustand, den die Navigation hat, wenn ein Besucher sie nur betrachtet. Quasi der Ruhezustand. Kette bedeutet, du hast auf einen Eintrag in der Navigation geklickt und dieser Eintrag hat Unterseiten und du hast eine dieser Unterseiten ausgewählt.In diesem Moment übernimmt die Seite, welche die Unterseiten hat den Zustand "Kette" und zeigt an, die aufgerufene Seite gehört zu mir. Wenn du eine Seite aufrufst um diese dann zu betrachten wechselt der Zustand des zu der Seite gehörenden Navigationspunktes zum Modus "Aktiv".
Zusätzlich hat ein Navigationspunkt noch zwei Zustände, welche durch die Maus selbst gesteuert werden. Der normale Zustand (4) ist der, dass sich keine Maus über diesen Navigationseintrag befindet. Mit "Hover" (5) bezeichnet man das Ereignis, dass sich die Maus gerade über einen Eintrag in der Navigation befindet. Im obigen Bespiel ist der Hintergrund der Navigation im normalen Zustand durchsichtig und im "Hover" mit einer grauen Farbe versehen. Nehmen wir an, der Hintergrund vom Bereich der Navigation ist grün. Dann sieht die Navigation im normalen Zustand so aus, dass die Einträge mit einer weissen Schrift dargestellt werden auf grünen Hintergrund. Bewegst du jetzt die Maus über einen Navigationspunkt ändert sich die Hintergrundfarbe zu Grau, die Schrift bleibt weiss.
Wenn ein Navigationspunkt den Zustand Kette oder Aktiv hat gibt es keinen Zustand "Hover. Deshalb fehlt dann die Option, die Farben für "Hover" einzustellen:
Die Vorschau (7)
In der Gesamtansicht oben gibt es den Punkt 7. Links im Dialog befindet sich eine Vorschau. Darüber kannst du sehr gut überprüfen, wie sich deine Farbeinstellungen auf die Navigation auswirken. Die Vorschau ist interaktiv, du kannst also mit der Maus testen, wie es aussieht, wenn du die Maus über einen Navigationspunkt bewegst oder wie das Aufklapp-Menü aussieht.