CSS Webdesign - Navigation oben mit Listen und CSS

Navigationsleiste mit CSS horizontal

Hier zeige ich Ihnen wie die Navigation ganz einfach geändert werden kann. Wie Sie sehen wurde die obere horizontale Navigation jetzt per CSS total verändert.

Beachten Sie hier bei der waagerechten Navigation die Verschachtelung von ul und li. Zusätzlich zu den Links wurde in der Navigation ein Text eingefügt, der zeigt was im nächsten Kapitel kommt. Die obige Navigation liegt nun um es besser zu verdeutlichen statt im DIV navibereich nun im DIV-Bereich der hier breadcrumbs heisst, die übliche Bezeichnung für die obere waagerechte Navigation:

Eine Besonderheit wird hier eingeührt, dass in der Navigation zusätzlich die >>, eine kleine Grafik zu sehen sind. Diese wurden in einer eigenen Klasse referenziert: <li class="breadcrumb">
Die Styleangaben:
#breadcrumbs {color: white; background-color: #65bb12; border:2px solid #56aa04; padding: 5px; border: 1px solid black;}
#breadcrumbs ul {margin-left: 0; padding-left: 0; display: inline; }
#breadcrumbs li.breadcrumb {background: transparent url('http://xhtml.com/images/breadcrumb.gif') center left no-repeat; padding-left: 16px;}
#breadcrumbs ul li {margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline;}
#breadcrumbs ul li a {color: white;}
#breadcrumbs ul li a:hover {color:white; background-color:black;}
Ausführliche Anleitungen finden Sie In den CSS Grundlagen

Weitere Navigationsleisten mit CSS

Ganz ohne Grafik, allein mit CSS gestaltet:
Um die Links inder Navigation waagerecht anzuordnen müssen Sie im Stylesheet angegeben:
display: inline;

Hier geht die Navigationsbar über die gesamte Webseitenbreite

Nur mit CSS, ohne Bilder wurde diese Navigation erstellt, fahren Sie mit der Maus darüber

Auch ohne Grafiken lassen sich Links in der Navigation als Karteireiter bzw. Register erstellen. in der fachsprache nennt man diese Art von Design Tabs. Damit die jeweils aktive Webseite auf der man sich befindet, in der Navigation hervorgehoben aussieht, ist es wie bereits beim Thema Naviation und Listen erwähnt, dass Sie jedem Link eine eindeutige ID vergeben und diesen für die jeweilige Webseite wie gewünscht anpassen.

Wenn Sie mit der Maus darüberfahren, wird der Link unterstrichen

Bei diesem Beispiel kommen 2 Hintergrundgrafiken in der Navigation zum Einsatz

Hier sehen Sie Beispiele, wie Sie Ihre Links mit Grafik-Hovereffekt versehen können

Wenn Sie mit der Maus über einen Link fahren, wechselt die Grafik

Auch so eine Navigation, hier also waagerecht kann man mit CSS erstellen

Beim Webdesign bieten sich etliche Varianten an, wie Sie das Menü erstellen können

Besonders schöne Designs erreichen Sie durch dezente Farbunterschiede

In diesem Webdesign z.B. eine Navigation im Apple Design

Sehr schön bei vertikaler Navigation sind immer wieder die Reiter

Beim Mouseover erziehlen Sie hier einen schönen highlight Effekt

Hier sehen Sie eine Art Plastic Effekt bei den Buttons

Hier eine sind die Links mit einem Metallic-Effekt versehen

Die Button der Navigation bieten hier ein leicht nach innen gewölbtes Design

Ein sehr exklusives Design bieten z.B. Navigationsleisten mit Ordnern