Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Formatierung von horizontalen Navigationsleisten mit CSS

Posted by sura1 - 2. Januar 2009

jan02_128x128
Bookmark and Share

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)
button1
     Beispiel 1:           Beispiel 2:           Beispiel 3:           Beispiel 4:
demo2 demo2 demo2 demo2

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!]
hor_nav1_html

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!]
hor_nav2_html

Beispiel 3:

Horizontale Navigation mit Hintergrundfarbe, Rahmen und 3 Hintergrund-Grafiken

Hintergrund-Grafiken:

nav-bg.jpg nav-bg-2.jpg nav-bg-3.jpg
     nav-bg         nav-bg-2          nav-bg-3
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!]
hor_nav3_html

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
     nav-bg-l       nav-bg-r
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!]
hor_nav4_html

Zusammenfassung:

   Fertige Beispiele: Zip_Datei (11,6 KB)
button1
     Beispiel 1:           Beispiel 2:           Beispiel 3:           Beispiel 4:
demo2 demo2 demo2 demo2

Ä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

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: