Beispiele für die Formatierung von horizontalen Navigationsleisten
Die folgenden 4 Beispiele zeigen, wie aus einer ungeordneten Liste eine horizontale Navigationsleiste wird. Dabei wird zunächst nur Farbe, dann Farbe mit Rahmen, danach auch Grafik und zum Abschluss die Technik »Sliding Doors« kombiniert mit der Technik »Hovereffekte mit CSS-Sprites« verwendet.
Informationen zu »Sliding Doors«:
http://www.alistapart.com/articles/slidingdoors/ (englisches Original)
http://www.thestyleworks.de/tut-art/listnav3.shtml (deutsche Übersetzung)
Informationen zu »Hovereffekte mit CSS-Sprites«:
http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
http://bueltge.de/css-sprites-einfach-erklaert/675/
http://www.alistapart.com/articles/sprites/
Fertige Beispiele: Zip_Datei (11,6 KB)Beispiel 1: Beispiel 2: Beispiel 3: Beispiel 4:
Beispiel 1:
Horizontale Navigation nur mit Hintergrundfarbe
HTML:
<ul id="navigation-1">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>
CSS
/* Beispiel 1 */
#navigation-1 li {
background: #525D69;
float: left;
}
#navigation-1 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}
#navigation-1 li a:hover {
background: #2f588d;
color: #fff;
}
#navigation-1 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}
Ergebnis:
[Beispiel 1 ansehen: bitte Grafik anklicken!]
Beispiel 2:
Horizontale Navigation nur mit Hintergrundfarbe und Rahmen
HTML:
<ul id="navigation-2">
<li class="start"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="ende"><a href="#">Dolor</a></li>
</ul>
CSS
#navigation-2 li {
background: #525D69;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
}
#navigation-2 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}
#navigation-2 li a:hover {
background: #2f588d;
color: #fff;
}
#navigation-2 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}
#navigation-2 li.start {
border-left: 0;
}
#navigation-2 li.ende {
border-right: 0;
}
Ergebnis:
[Beispiel 2 ansehen: bitte Grafik anklicken!]
Beispiel 3:
Horizontale Navigation mit Hintergrundfarbe, Rahmen und 3 Hintergrund-Grafiken
Hintergrund-Grafiken: nav-bg.jpg nav-bg-2.jpg nav-bg-3.jpg
HTML:
<ul id="navigation-3">
<li class="start"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="ende"><a href="#">Dolor</a></li>
</ul>
CSS
/* Beispiel 3 */
#navigation-3 li {
background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
}
#navigation-3 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}
#navigation-3 li a:hover {
background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
color: #fff;
}
#navigation-3 li a.active {
background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
color: #fff;
text-decoration: underline;
}
#navigation-3 li.start {
border-left: 0;
}
#navigation-3 li.ende {
border-right: 0;
}
Ergebnis:
[Beispiel 3 ansehen: bitte Grafik anklicken!]
Beispiel 4:
Horizontale Navigation mit 2 Hintergrund-Grafiken und Anwendung der Technik »Sliding Doors« und »Hovereffekte mit CSS-Sprites«.
2 Hintergrund-Grafiken: nav-bg-l.jpg nav-bg-r-jpg
HTML:
<ul id="navigation-4">
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Ipsum</span></a></li>
<li><a href="#"><span>Dolor</span></a></li>
<li><a href="#" class="active"><span>Lorem</span></a></li>
<li><a href="#"><span>Ipsum</span></a></li>
<li><a href="#"><span>Dolor</span></a></li>
</ul>
CSS
#navigation-4 li {
float: left;
margin: 0 2px 0 0;
}
#navigation-4 li a {
background: #676f7a url(nav-bg-l.jpg) top left no-repeat;
color: #DFE1E2;
float: left;
padding: 0 0 0 5px;
}
#navigation-4 li a span {
background: #676f7a url(nav-bg-r.jpg) top right no-repeat;
color: #DFE1E2;
float: left;
padding: 10px 15px 10px 10px;
}
#navigation-4 li a:hover span {
background-position: 100% -92px;
color: #fff;
}
#navigation-4 li a:hover {
background-position: 0 -92px;
color: #fff;
}
#navigation-4 li a.active {
background-position: 0 -184px;
color: #fff;
text-decoration: underline;
}
#navigation-4 li a.active span {
background-position: 100% -184px;
color: #fff;
text-decoration: underline;
}
Ergebnis:
[Beispiel 4 ansehen: bitte Grafik anklicken!]
Zusammenfassung:
Fertige Beispiele: Zip_Datei (11,6 KB)
Ähnliche Artikel:
Navigationsmenüs in Registeroptik
CSS-Menüs ohne Einsatz von Listenelementen
Navigations-Menü mit Button-Effekt
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten
