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.


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



© 2007 – 2017 Web-Spirit Sebastian Gollus | Werbeagentur & Marketing Beratung | aus Voerde/Wesel