In diesem Tutorial wird gezeigt, wie die Balkennavigation in eine Knopfnavigation umwandelt werden kann.

Ausgangsnavigation		Knopfnavigation

Ein fertiges Design mit Knopfnavigation kann in der Galerie heruntergeladen werden.

Als erstes wird in das Register "Navigation horizontal" gewechselt.



Hier finden sich vor allem Einstellungen für die einzelnen Navigationselemente.
In der ersten Sektion befinden sich die Einstellungen für den Navigations-Abschnitt als Ganzes:

Als erstes wählt man das Hintergrundbild ab, indem die Checkbox "Bild anzeigen" abgewählt wird.

Das Bild besitzt noch eine Färbung unter "Bild einfärben". Obwohl das Bild nicht mehr sichtbar ist, wird die Färbung ordnungshalber zurück gesetzt:



Über den Dropdown-Knopf rechts, erscheint ein Menu in dem man die Farbe über "Keine Angabe" entfernen kann.

Jetzt muss nur noch die eigentliche "Hintergrundfarbe" entfernt werden. Auch diese Farbe setzt man auf "Keine Angabe" oder "Transparent" ("Keine Angabe" wirkt wie "Transparent", die Farbe wird mit "Keine Angabe" allerdings nicht in der Styling-Datei hinterlegt).

Die Einstellungen können nun mit der "Ok" bestätigt werden.

Durch die getätigten Einstellungen ist der Hintergrundbalken der Navigation verschwunden.
Allerdings sieht man ober- und unterhalb der Navigation einen grauen Rahmen.



Diese sollen nun entfernt werden. Dazu klickt man bei "Navigation" auf "Rahmen".

Im Rahmen-Einstellungsdialog kann man für alle vier Seiten eines Elementes einen Rahmen setzen. Zwei der Rahmen (der obere und der untere Rahmen) sind für die Navigation momentan eingestellt.
Mit dem Abwählen der Checkbox "Oberer Rahmen anzeigen" und "Unterer Rahmen anzeigen" sind die Rahmen für die Navigation nun ausgeschalten.

Die Navigation sieht nun wesentlich leerer aus. Jetzt müssen nur noch die Navigationselemente gestylt werden.



Dazu muss man sich mit den Navigationselementen der ersten Navigationsebene beschäftigen.

Das aktuelle Navigationselement (das Element, das angibt auf welcher Seite man sich gerade befindet) und das aktive Navigationselement (das Element, über dem der Mauszeiger steht) haben eine Hintergrundfarbe und ein Hintergrundbild. Diese werden nun als nächstes ausgeschaltet. Dazu muss man genau gleich vorgehen wir bei dem Navigation Hintergrund selbst.

Um das aktuelle Navigationselement zu stylen klickt man "Aktuell" an und um das aktive Navigationselement zu stylen klickt man auf "Aktiv" in der Sektion "Ebene 1".



Für beide Elemente werden die gleichen Einstellungen vor genommen:

Als erstes wählt man das Hintergrundbild ab, indem die Checkbox "Bild anzeigen" abgewählt wird.

Das Bild besitzt noch eine Färbung unter "Bild einfärben". Obwohl das Bild nicht mehr sichtbar ist, wird die Färbung ordnungshalber zurück gesetzt:



Über den Dropdown-Knopf rechts, erscheint ein Menu in dem man die Farbe über "Keine Angabe" entfernen kann.

Jetzt muss nur noch die eigentliche "Hintergrundfarbe" entfernt werden. Auch diese Farbe setzt man auf "Keine Angabe" oder "Transparent" ("Keine Angabe" wirkt wie "Transparent", die Farbe wird mit "Keine Angabe" allerdings nicht in der Styling-Datei hinterlegt).

Die Einstellungen können nun mit der "Ok" bestätigt werden.

In der Vorschau sieht man nun eine leere Navigation.
Damit die Navigationselemente ein Knopfartiges aussehen bekommen, wird für alle vier Seiten einen Rahmen auf dem passiven Navigationselement gesetzt.

Den Eigenschaftendialog für das passive Navigationselement erscheint wenn der Knopf "Passiv" in der Sektion "Ebene 1" gedrückt wird.

Im Dialog wird in das Register "Rahmen" gewechselt.
Standardmässig werden alle vier Seiten zur Bearbeitung angezeigt. Wenn jede Seite das gleiche Styling haben soll wählt man den Radiobutton-"Gesammt Einstellungen" aus.



Wenn alle drei Angaben gemacht sind kann der Dialog mit „Ok“ bestätigt werden.

Da der Rahmen nicht aktiv ist, wählt man die Checkbox für "Rahmen anzeigen" an.

Unter "Rahmenstil" können verschiedene Stils für den Rahmen ausgewählt werden. Wenn man einen normalen Rahmen möchte, wählt man den Stil "Durchgezogen (solid)" aus.

Als nächstes kann die Farbe für den Rahmen gewählt werden. "Keine Angabe" bewirkt, dass der Browser als Rahmenfarbe die Textfarbe verwendet.

Bei der "Rahmendicke" wird ein Pixelwert eingegeben, der die Breite des Rahmens bestimmt.

Die Navigationselemente haben nun ihren Rahmen. Allerdings kleben sie noch aneinander.



Deshalb wird noch ein Aussenabstand für die Elemente gesetzt. Diese Einstellung kann unter "Elemente Allgemein" > "Aussenabstand" eingestellt werden.



Der Abstand soll rechts sein, deshalb wird im Einstellungsdialog unter "Rechts" einen kleinen Pixelwert, zum Beispiel 6px, angegeben.

Durch die Abstände und die Rahmen rings um die Navigationselemente entsteht eine Knopfnavigation.