Navigation mit CSS
Menüs ohne Skripte

Vorteile

Navigation mit CSS

Die Kombination aus Text, HTML und CSS bietet unschlagbare Vorteile im Vergleich zur Grafik und zu Skriptlösungen. Die Seite wird schnell geladen und ausgelagerte Formatierungen erlauben ein flexibles Design. Man muss sich nicht mit einem Grafikprogramm abmühen, um interessante Effekte zu erzielen. Der Verzicht auf Javascript bietet darüber hinaus eine größere Unabhängigkeit vom jeweils auf Clientseite eingesetzten Browser. Allerdings haben bekanntlich auch die neuesten Browser in Sachen CSS-Unterstützung ihre Macken.

Klassische Navigationsleiste

Navigation mit CSS

Mit wenig CSS-Code lässt sich eine klassische Navigationsleiste, die sich typischerweise in der linken Spalte befindet, zu einem Menü mit Rollover-Effekten ausbauen. Welche Variante man für die Grundkonstruktion wählt, ist sekundär. Tabellen, Listen oder einfache Textaufzählungen kommen dafür in Frage. Ein Menü in Tabellenform erfordert folgenden Code:

Navigation aufgepeppt

Navigation mit CSS

Ohne Style-Definitionen sieht diese Navigation wie aus der Steinzeit des Webs aus. Um daraus eine ansprechende Navigation zu machen, muss die CSS-Klasse nav nach folgendem Muster definiert werden:


.nav {
float:left;
width:134px;
line-height:12px;
border:1px solid #d3d3d3;}

.leer {
background-color:#d3d3d3;
line-height:1px;}


Will man statt der vertikalen Menü-Anordnung eine horizontale, muss man die HTML-Tabelle entsprechend umbauen und dabei eventuell die padding-Werte etwas modifizieren.

Ansonsten lässt sich dieses Grundgerüst beliebig manipulieren. Durch Anpassung der Farbwerte ist eine nahtlose Integration in ein vorhandenes Layout möglich.

Menüleiste mit Button-Effekt

Navigation mit CSS

Menüleisten sollen schnell geladen werden, einen geringen Pflegeaufwand erfordern und dazu noch schick aussehen. Probieren Sie einmal unsere CSS-Hover-Variante mit Button-Effekt bei Mausberührung.

Berührt die Maus einen der Links, so leuchtet der Hintergrund im Button-Stil hellblau auf, außerdem wechselt die Schrift von Schwarz nach Weiß. Dafür wird kein Javascript benötigt, nur einige CSS-Befehle. Die gestrichelten Linien sind umdefinierte

-Linien. Das allerdings klappt nicht mit Netscape 6, sieht dort aber auch nicht übel aus. Alternativ lassen sich GIFs verwenden.

Das Stylesheet definiert den normalen Link und den Hover-Link. padding sorgt für die richtigen Abstände. Dabei ist darauf zu achten, dass auch die Grundeinstellung mit denselben Werten formatiert wird, sonst kommt es zu unfreiwilligen Sprüngen.

Damit der berührte Link tatsächlich so etwas wie einen Button erzeugt, werden feine Rahmen in Grau und Schwarz gesetzt. Ohne sie bekämen wir nicht mehr als einen farbigen Hintergrund zustande.


A:link {
color : black;
font : menu;
text-decoration: none;
padding-right : 16px;
padding-left : 6px;
padding-top : 4px;
padding-bottom : 4px;
border : 1px solid white; }

HR {color : white; border-bottom : 1px dotted #0099FF; text-align :left}


Links ausrichten

Navigation mit CSS

Das Menü selbst besteht aus simplem HTML und liegt in einer Tabelle. Mit unsichtbaren Leerzeichen wurden alle Links auf etwa dieselbe Breite gezwungen.

Alle modernen Browser zeigen das Menü mit dem gewünschten Effekt.

Hover-Links: HTML

Navigation mit CSS

Links, die bei Mausberührung ihr Aussehen verändern, helfen bei der Orientierung. Man kann den Hover-Effekt jedoch auch nutzen, um zusätzliche Informationen anzuzeigen. Im Prinzip wird nicht mehr getan, als ein Icon oder einen kurzen Text neben dem Link zu verstecken. Diese Hinweise sind unsichtbar und kommen erst ans Tageslicht, sobald ein Link mit der Maus berührt wird. Dafür eignen sich nur kleine Grafiken. Auch muss die Menüleiste ausreichend Platz bieten, damit alles angezeigt werden kann. Hintergrundfarben und Ränder können wie üblich ganz nach Wunsch definiert werden.

Der HTML-Quellcode für dieses Experiment sieht so aus:

Rubrik 1 & nbsp;

Rubrik 2
& nbsp;

Rubrik 3
& nbsp;

Nichts als geschickte Verschachtelung also. Die Leerzeichen (& nbsp;) sorgen dafür, dass sich Bild und Link nicht zu nahe kommen. Das kann auch auf andere Weise realisiert werden.

Hoover-Links: CSS

Navigation mit CSS

Der CSS-Quellcode sieht so aus:


#kasten {
color: black;
background-color: transparent;
text-decoration: none;
font-family: verdana;
font-weight: normal;
padding-left: 2px;
border: 0px solid black; }

#kasten a:hover .info {
color: black;
display: inline;
background-color : yellow;
border: 0px solid black;
padding-left: 2px;
text-align: right; }


Natürlich kann man auch hier wieder modifizieren. Wichtig sind in jedem Fall die Icons, die man vorher mit Hilfe eines Grafikprogramms konstruieren muss. Transparente GIFs eigenen sich an dieser Stelle am besten, weil man dann am leichtesten mit den Hintergrundfarben jonglieren kann.

Schnelle Rollover-Menüs ohne Preload

Navigation mit CSS

Bei der Erstellung von Rollover-Effekten ist man darauf angewiesen, mehrere Bilder zu verwenden. Das hat im Gegenzug längere Ladezeiten zur Folge oder erfordert ein Vorladen der Bilder, ein so genanntes Preloading.

Doch auch das Preloading ist nicht das Gelbe vom Ei, und bei komplexeren Quelltexten oder Designs wird es mit der Zeit ziemlich lästig. Abhilfe schafft ein kleiner Trick. Statt für jeden Zustand ein extra Bild zu verwenden, benutzen Sie einfach ein einziges Bild, welches alle Zustände enthält.

Der Vorteil dabei: Dynamische Veränderungen erfolgen wesentlich schneller und es wird kein Preload mehr benötigt. Es ist nicht mehr notwendig, das Background-Image zu wechseln, es wird lediglich seine Position verändert. Im folgenden Beispiel wird ein Menü verwendet, das 25 px hoch sein soll. Da drei Zustände vorhanden sind (normal, mouseover, angeklickt), muss die zu verwendende Grafik 3 x 25 px = 75 px hoch sein. Der Code dazu sieht wie folgt aus:

rollovermenu a beschreibt den Ursprungszustand des Menüs. Die Grafik rollovermenu.gif wird eingeladen und an der Position 0 0 (X,Y) angezeigt. rollovermenu a:hover beschreibt den Zustand beim Mouseover, es wird dieselbe Grafik verwendet, jedoch verschiebt sich ihre Position diesmal um 25px nach unten (background-position: 0px-25px), es wird also das nächste Bild angezeigt. rollovermenu a:active beschreibt den Zustand, wenn das Menü angeklickt wurde, diesmal verschiebt sich die Position um 50px nach unten, es wird das dritte Bild angezeigt. Dieser Code funktioniert in allen CSS-2-kompatiblen Browsern. Für den Firefox sollte man die CSS-Eigenschaft von rollovermenu a um die Zeile display: block ergänzen, da Firefox die Grafik sonst nur für den kleinstmöglichen Bereich anzeigt, den der Link einnimmt.

Hilfreiche Quellen

Navigation mit CSS

Wer sich seine Navigationen und Stylesheets nicht selbst erarbeiten will, dem stehen zahlreiche Quellen mit Material zur Verfügung, das mit Hilfe von Cut and Paste in die eigene Site eingebaut werden kann. Eine Variante: Man nutzt die Vorlagen, die zum Beispiel zum Paket des verwendeten Editors gehören. Beispielsweise lassen sich Navigationsvorlagen abkupfern. Das folgende Menü finden Sie in der dreispaltigen CSS-Vorlage in Dreamweaver 8. Im Ergebnis erhalten Sie einen Navigationsbereich, der auf Mouseover reagiert und den Hintergrund farblich verändert:

Die Definition des div-Containers erfolgt über die ID sectionLinks, die im CSS so aussieht:


#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}


Alternativ kann man auch auf die online im Web angebotenen CSS-Menüs zurückgreifen und diese für die eigene Site nutzen. Sehr komfortabel gelingt dies zum Beispiel bei List-O-Matic. Hier geben Sie die Beschreibungen und Links für Ihre Navigation ein, wählen die gewünschte Navigations-Variante aus und der Service generiert Ihnen automatisch den Code für das Stylesheet und die HTML-Seite.

Probleme mit CSS

Navigation mit CSS

Wer seine Navigation mit Hilfe von CSS layouten will, kann zwar sehr flexibel agieren, was die Bedienung verschiedener Clients betrifft, doch auch diese Methode hat ihre Tücken. Die Browser-Welt ist weit davon entfernt, ein einheitliches Bild bei der Unterstützung von CSS abzugeben. Die momentan aktuellen Browser lassen sich bezüglich ihrer CSS-Fähigkeiten grob in vier Gruppen einteilen:

– Firefox 1.x, Mozilla ab 1.5, Opera ab 7 und Safari ab 1.1 unterstützen den aktuellen Standard CSS 2.1 sehr ordentlich und realisieren teilweise sogar bereits Eigenschaften des designierten Nachfolgers CSS 3.
– Der Internet Explorer in der Version 6 hinkt schon etwas hinterher, erlaubt aber trotzdem noch komplettes Layout mit CSS ? mit Einschränkungen trifft das auch auf die Version 5.5 zu.
– Der Internet Explorer 5 und die letzten Mac-Versionen 5.1 und 5.2 sind die aktuellen »Sorgenkinder« der CSS-Entwickler. Obwohl prinzipiell auch hier noch Layout mit CSS möglich ist, erfordern diese Browser an vielen Stellen Sonderlösungen und zusätzliche Aufmerksamkeit.
– Noch ältere Versionen des Internet Explorer und der bei CSS-Entwicklern berüchtigte Netscape 4 spielen inzwischen nur noch in Nischen eine Rolle und können für die meisten Anwendungen ignoriert werden.

Es gibt eine Reihe von Browsern, die auf unterschiedlichen Versionen der oben Genannten basieren und entsprechend funktionieren.

Mit Tricks, im Notfall auch Hacks und vor allem einer guten Planung des CSS-Designs einer Website kann man jedoch das Problem der Browserkompatibilität etwas entschärfen.