CSS Navigation mit Liste

Eine komfortabale Möglichkeit eine Navigation in CSS zu erstellen, ist die Verwendung einer Liste. Diese kann über CSS beliebig gestaltet werden. Da wir Schrift im Klartext verwenden, ist die Navigation optimal suchmaschinenoptimiert (SEO).

XHTML Markup

Betrachten wir zunächst den Aufbau des XHTML Quelltextes. Wir erstellen eine Liste durch den Tag <ul> und einzelne Listenelemente durch den Tag <li>. Hyperlinks wie gewöhnlich mit <a>:

<ul id="navigation">
<li><a href="http://www.web-spirit.de">Startseite</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>

CSS Beispiel 1

Diese Liste können wir nun mit CSS wie folgt gestalten:

ul#navigation{
list-style-type:none;
margin-left:0;
padding-left:0;
}
ul#navigation li{
float:left;
padding-right:2px;
}
ul#navigation li a{
background-color:#cbcbcb;
padding:0.2em;
}
ul#navigation li a:hover{
background-color:#ababab;
}

Die Navigation sieht dann so aus:

• Startseite
• Inhalt
• Kontakt

CSS Beispiel 2

Wenn man das “float:left;” weglässt, dann werden die Listenelemente untereinander angezeigt. Natürlich kann man den Navigationselementen nun auch eine Grafik zuordnen, wenn man mit der Maus über einen der Links ist. Das CSS dazu sieht dann so aus:

ul#navigation{
list-style-type:none;
margin-left:0;
padding-left:0;
}
ul#navigation li{
margin-bottom:0.2em;
}
ul#navigation li a{
background-color:#cbcbcb;
display:block;
padding:0.4em;
width:100px;
}
ul#navigation li a:hover{
background:#cbcbcb url(star.gif) 90% 6px no-repeat;
}

Die Navigation sieht dann so aus:

• Startseite
• Inhalt
• Kontakt

Natürlich gibt es unendlich viele Gestaltungsmöglichkeiten für eine individuelle Navigation.

Weitere Tutorial-Artikel

• AdBlocker erkennen und Fallback nutzen
• Wetter auf eigener Website mit Google Weather API
• HTML Formulare effektiv gestalten
• RSS Feed auslesen mit PHP
• CSS Tagcloud (Schlagwortwolke)
• PHP und MySQL Tagcloud (Schlagwortwolke)
• CSS Pagination (Seitennummerierung)
• CSS Newsteaser
• CSS Bildwechsel

Sebastian Gollus

Ich bin seit 2007 selbständiger und freiberuflicher Web-Developer. Auch bin ich studierter Medien­wissen­schaftler mit Abschluss an der Uni Duisburg-Essen in „Angew. Kognitions- und Medien­wissen­schaften”. Neben Deutsch spreche ich auch Englisch und Niederländisch.
Kontakt zu mir gerne auch über Google+ und twitter.

Die neuesten Artikel