Start Blog Tutorial CSS Navigation mit Liste

CSS Navigation mit Liste

CSS NavigationEine 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:

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:

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

Weitere Tutorial-Artikel

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.

5 Kommentare zu “CSS Navigation mit Liste

  1. Heiko sagt:

    Coole Idee mit dem Stern… Danke für die Inspiration, werds bei mir einbauen… Ich glaub ich bau mir kleine Mini-Ferienhäuser als BG, weil ich ne Reiseseite mit css navi hab…

  2. Mario sagt:

    Ich werds bei meiner Singlebörse Ysingle mal probieren…. Vielleicht auch ein Herz oder ein Ypsilon welches durch die Navi hüpft.

    Echt Colle Idee, danke

  3. Michael sagt:

    Hi,
    ich hab ne grundsätzliche Frage:
    Wenn ich diese Navigation verwende, muss ich die Links doch auf jede einzelne Unterseite mit einbauen, oder?
    Gibt es keine Möglichkeit, dass ich die Links zentral irgendwo anlege und jede neue Unterseite die Navigation automatisch erhält?

  4. Alex sagt:

    Sowas bloß nicht über Frames!

    mach das über einen PHP include -Befehl

    Frames sind veraltet

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">