Navigationsleisten erstellen und mit CSS gestalten

Schritt 1: Links in einer ungeordneten Liste anordnen

Um eine Navigation zu erstellen, wird eine ungeordnete Liste <UL> inkl. der Verweise im HTML-Dokument notiert. Das ID-Attribut dient zur Identifizierung. So können die CSS-Regeln auf der Navigation angewandt werden. Der Aufbau ist dabei recht einfach und sollte keine Schwierigkeiten machen.


<ul id="navigation">
 <li><a href="indes.htm">Startseite</a></li>
 <li><a href="impressum.htm">Impressum</a></li> 
 <li><a href="kontakt.htm">Kontakt</a></li>
</ul>

Schritt 2: Wichtige Vorbereitung

Um die Listen in jedem Browser gleich darstellen zu können, müssen die Außen- und Innenabstände auf 0 gesetzt, sowie die Aufzählungspunkte ausgeblendet werden. Außerdem wird der Navigation noch eine Breite zugewiesen.

UL#navigation , UL#navigation LI  {
 margin:0;
 padding:0;
 list-style:none;
}
 
UL#navigation {
  width:200px;
}

Schritt 3: Für Abstand sorgen

Damit die einzelnen Menüpunkte nicht so aneinander kleben, wird für das <LI> Tag ein unterer Außenabstand definiert.

	   
UL#navigation LI {
 margin-bottom:1px;
}

Schritt 4: Links formatieren

Nun werden alle Links mit einer Vorder- sowie Hintergrundfarbe ausgestattet und sollen fett und nicht unterstrichen dargestellt werden.

UL#navigation LI A {
 background-color:#444;
 color:#fff; 
 font-weight:bold;
 text-decoration:none;
}

So sieht es bis jetzt aus.

Schritt 5: Die Beförderung

Damit sich die Links über die gesamte Breite erstrecken, müssen die <A> Tags zum Blockelement befördert werden. Dies wird mit der Anweisung display:block; erreicht.

UL#navigation LI A {
 background-color:#444;
 color:#fff; 
 font-weight:bold;
 text-decoration:none;
 display:block;
}

Hier seht ihr die Auswirkung von display:block.

Schritt 6: Platz schaffen und Linktext ausrichten

Damit die Listenelemente nicht mehr so mickrig und gedrungen wirken, bekommen alle A Elemente mit padding einen Innenabstand verpasst, der für den nötigen Platz sorgt.

UL#navigation LI A {
 background-color:#444;
 color:#fff; 
 font-weight:bold;
 text-decoration:none;
 display:block;
 padding:10px;
}	

So sieht es jetzt aus.

Schritt 7: Rollover-Effekt

Damit sich die Vorder- und Hintergrundfarbe beim überfahren mit der Maus ändert, muss noch eine weitere Regel mit Hilfe der Pseudoklasse :hover aufgestellt werden.


UL#navigation A:HOVER {	 
 background-color:#a33;
 color:#fff;
}

Hier die fertige Navigation.

Alles ist horizontal

Mit wenigen Änderungen lässt sich aus der vertikalen eine horizontale Navigation erstellen.


UL#navigation {
 width:603px; /* So breit wie alle 3 Navipunkte + 3 x 1 Pixel Außenabstand */
 float:left;  /* Um Darstellungsfehler zu vermeiden */
}
UL#navigation LI {
 float:left;  /* Navipunkte nebeneinander ausrichten */ 
 margin-right:1px;
 width:200px;
} 

UL#navigation LI A {
 text-align:center;
}

Schon fertig.

Nachtrag zu Pseudoklassen

In diesem Beispiel habe ich mich nur auf der Pseudoklasse :hover beschränkt. Nun folgt noch eine Liste mit weiteren Pseudoklassen, die sich auf Links anwenden lassen.

  • a:link
  • a:visited
  • a:focus
  • a:hover
  • a:active

Das waren zwei von vielen Möglichkeiten eine Navigation zu erstellen. Ich hoffe das euch diese kleine Anleitung weiter geholfen hat und wünsche noch viel Spaß beim Nachbauen und Experimentieren.

erstellt am 21.03.2011

nach oben