15.11.2009

Horizontale Listen-Navigation

1. Basis-Navigation

In diesem Kapitel wurde das Prinzip einer CSS-formatierten, vertikalen Listen-Navigation erklärt. Hier wollen wir mit wenigen Kniffen aus der vertikalen eine horizontale Navigation machen.
Dazu bedarf es im Prinzip nur einer zusätzlichen CSS-Angabe. Erstellt deshalb zunächst ein vertikales Menü nach der genannten Anleitung. Dann fügt in euren CSS-Code noch folgende Angabe zusätzlich ein:

#navi li {
float: left;
}

In Demo 1 seht ihr, wie schnell sich unsere vertikale Navi in eine horizontale verwandelt hat. Der Grund liegt darin, dass die Listeneinträge li links gefloatet wurden und sich somit nun neben- statt untereinander anordnen. So einfach war das also.

2. Feintuning

Nun können wir uns noch um etwas Feintuning kümmern:

Bei der Vertikal-Navi hatten wir einen unteren Rahmen zur sichtbaren Trennung der Links eingebaut. Diesen brauchen wir hier nicht. Wer möchte, kann ihn durch einen rechten Rahmen ersetzen, so dass die einzelnen Buttons etwas Abstand voneinander haben.

Oft fügt sich ein Horizontalmenü besser in ein Seitenlayout ein, wenn sich die einzelnen Links auf einer durchgehenden Navigationsleiste befinden. Eine solche Leiste erreichen wir, indem wir #navi eine passende Hintergrundfarbe oder eine sich horizontal kachelnde Hintergrundgrafik zuweisen. Allerdings wird dies nur sichtbar, wenn für #navi dann auch eine Breite angegeben ist. Das kann ein Pixelwert oder ein prozentualer Wert sein. Bei letzterem muss jedoch für das übergeordnete Element (z.B. den body oder einen #wrapper) eine entsprechende Breite definiert sein.

Schließlich gilt es zu beachten, dass "li"-Listeneinträge gefloatet sind. Der Firefox zum Beispiel stellt deshalb die Hintergrundleiste (standardgemäß) nicht dar, solange nicht gecleart ist. Nun können wir vor dem Schließen von </ul> nicht einfach einen clearenden Div einbauen, weil innerhalb von "ul" nur das Element "li" vorkommen darf. Das Problem lässt sich jedoch mit einem overflow: auto lösen, womit wir auf das Clearen verzichten können.
Somit ergänzen wir:

#navi {
margin: 0;
padding: 0;
list-style-type: none;
background: #6f79dc;
width: 100%;
overflow: auto;

}

Schon haben wir in Demo 2 ein horizontales Menü mit einer farbigen Hintergrundleiste.
Wer die Link-Buttons noch zentrieren möchte, der kann nach dieser Anleitung vorgehen.

nach oben