CSS Navigation mit Liste 01.11.2007
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:
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.
Heiko
1
am 01.03.2010 um 23:17 Uhr.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...
Mario
2
am 20.03.2010 um 03:13 Uhr.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
Einen eigenen Kommentar schreiben
Buchtipps
AnzeigeAnzeige
