CSS-Menüs
Navigationsideen mit CSS

DeveloperIT-ProjekteSoftware

Die Navigation ist das zentrale Element einer Website. Sind Position und Aussehen entschieden, geht es an die Realisierung mit CSS. Mit wenig Aufwand sind hier tolle Effekte möglich.

Position der Navigation

CSS-Menüs

Bevor die Tipparbeit für eine Navigation beginnt, muss Denkarbeit in den Aufbau der Navigation gesteckt werden. Die erste Frage ist, wie viele und welche Punkte die Navigation enthalten soll. Gerade bei umfangreicheren Navigationen oberhalb von acht bis zehn Links ergeben sich Beschränkungen für die Optik. In einer vertikalen Navigationsleiste reicht meist der Platz nicht aus – vor allem, wenn besonders lange Navigationspunkte verwendet werden sollen.

Stehen Menge und Inhalt der Navigation ungefähr fest, geht es an die Positionsentscheidung. Soll die Navigation vertikal oder horizontal sein? Dieser Workshop konzentriert sich auf die zurzeit sehr erfolgreichen horizontalen Navigationen, wie sie auf vielen moderneren Websites populär sind.

Sind alle Entscheidungen getroffen, kann die Tastatur in die Hand genommen werden. Als Technik kommt selbstverständlich CSS zum Einsatz. Eine mit HTML-Tabellen gebaute oder gar mit font-Tags formatierte Navigation ist heute nicht mehr zeitgemäß. Wer noch nicht umgestiegen ist, findet in diesem Workshop eine gute Basis für eine Modernisierung seiner Benutzerführung. CSS-Hacks, sprich das Ausnutzen von Besonderheiten einzelner Browser, sollten weitgehend vermieden werden. Mit einer Beschränkung auf moderne Browser und dem Ausschluss von alten Krücken wie dem Netscape Navigator 4.7 kann dies auch weitgehend gewährleistet werden.

Basis

Wenn Sie loslegen, gilt die erste Überlegung dem HTML-Code. Eine Navigation besteht logischerweise aus Links. Die Frage ist nur, wie diese Links verpackt werden. Denkbar ist, die Links einfach hintereinander zu schreiben:

Die hier gewählten Link-Titel entsprechen einer typischen Navigation für Unternehmen. Nun kann die gesamte Navigation recht einfach per CSS formatiert werden.

Allerdings sind Links in HTML standardmäßig so genannte Inline-Elemente, sprich, sie stehen in einem Blockelement und erzeugen nicht selbst einen Umbruch im HTML-Fluss. Dies müssen Sie auf jeden Fall ändern, wenn Sie beispielsweise die Hintergrundfarbe der Links beim Rollover anpassen wollen und wenn Sie beispielsweise die Abstände der Links nach oben steuern möchten. Dies geschieht einfach mit dem CSS-Befehl display:block für das Link-Tag.

Soll aus der Navigation eine horizontale Leiste werden, verwenden Sie den CSS-Befehl float: left. Nun fehlen nur noch ein paar kosmetische Korrekturen wie die Höhe und die Abstände:

#navigation a {
display: block;
float: left;
height: 24px;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
text-decoration: none;
color: white;
}

Die Hintergrundfarbe und Schriftformatierungen für die gesamte Leiste steuern Sie im übergeordneten div-Container. Dieser ist auf jeden Fall empfehlenswert, da er beispielsweise auch verwendet werden kann, um die gesamte Navigation in einem CSS-Layout zu positionieren.

#navigation {
height: 30px;
background-color: #999999;
font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 0.9em;
padding: 0px;
margin: 0px;
}

Wenn Sie wie hier relative Schriftgrößen mit em verwenden, müssen Sie aufpassen, dass die Schriftgröße noch stimmt, wenn Sie die Navigation in andere Bereiche der Website verschieben.


Liste

CSS-Menüs

Alternativ zur reinen Link-Sammlung wird eine Navigation auch oft mit den verschiedenen HTML-Listen gebaut. Am häufigsten kommt die ungeordnete Liste (ul) zum Einsatz. Alternativ ließe sich auch eine geordnete Liste (ol) einsetzen. Allerdings hat die Reihenfolge in einer Navigation selten eine Bedeutung, weswegen die ungeordnete Liste vorzuziehen ist. Die dritte gebräuchliche Listenart ist die Definitionsliste mit Definitionsterm und optional einer Beschreibung. Durch ihre sehr spezielle Bedeutung ist sie für Navigationen eher nicht geeignet. Die weiteren HTML-Listenarten menu und dir sind vom W3C als deprecated, also nicht mehr empfohlen, gekennzeichnet und sollten deswegen nicht eingesetzt werden.

In der Liste folgt dann jeder Link in einem eigenen Listenelement (li):

Die Variante mit Listen hat einige Vorteile: Die Navigation sieht auch ordentlich aus, wenn das CSS komplett fehlt. Außerdem haben Sie über das li-Element noch eine weitere Steuerungsebene. Dafür müssen Sie ein wenig mehr HTML-Code und auch etwas mehr CSS-Code in Kauf nehmen. Außerdem benötigen Sie hier im HTML-Code noch ein br-Tag, das den Anordnungsfluss mit float wieder beendet.

Im CSS-Code benötigt die Listenansicht zuerst einmal den speziellen Befehl list-style: none, damit keine Aufzählungszeichen erscheinen. Alle Formatierungen für die gesamte Navigation lassen sich dann für die Liste mit dem ul-Element vornehmen:

#navigation ul {
height: 30px;
background-color: #999999;
font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 0.9em;
list-style: none;
padding: 0px;
margin: 0px;
}

Die einzelnen Listenelemente (li-Tag) sind standardmäßig Blockelemente. Sie könnten diese verwenden, um beispielsweise eine Hintergrundfarbe zu definieren. Allerdings funktioniert der per CSS gesetzte Rollover-Effekt mit der Pseudo-Klasse hover nur mit Links. Insofern ist es meist praktischer, das Listenelement als Inline-Element zu definieren:

#navigation ul li {
display: inline;
}

Diese Maßnahme ist nur für den Internet Explorer bis Version 6 notwendig. Die anderen Browser ändern dadurch nichts. Im nächsten Schritt wird dann aus jedem Link ein Blockelement. Mit float:left entsteht daraus eine horizontale Leiste:

#navigation ul li a {
display: block;
float: left;
height: 24px;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
text-decoration: none;
color: white;
}

Die Abstände steuern Sie über margin und padding – hier der Übersichtlichkeit halber jeweils in Einzelbefehlen. Damit die Leiste mit dem ersten Element linksbündig beginnt, wird der Abstand zwischen den Links nur über margin-right gesteuert. Die Innenabstände gehen dagegen nach beiden Seiten. Der Abstand (padding-top) von oben dient dazu, den Text in der Leiste mittig auszurichten.

Sie könnten hier noch die Link-Zustände, die durch die Pseudoklassen link, active, visited und focus definiert sind, extra formatieren. Für das hier vorliegende Beispiel reicht der hover-Zustand für Rollover. In der Praxis ist in einigen Web-2.0-Anwendungen allerdings ein kleines Comeback des visited-Links zu beobachten.


Hover

CSS-Menüs

Der optisch wichtigste Zustand für Links in einer Navigation ist sicher der hover-Zustand, mit dem sich leicht ein Rollover-Effekt realisieren läßsst. Die einfachste Variante ist ein Wechsel von Schrift- oder Hintergrundfarbe:

#navigation ul li a:hover {
color: black;
background-color: #CCCCCC;
}

Sie können in einer Navigation aber natürlich auch mit Rahmen arbeiten. CSS bietet Ihnen die Möglichkeit, jeden Rahmen einzeln zu steuern. Mit border-top legt der folgende Code den oberen Rahmen fest, mit border-bottom den unteren:

#navigation ul li a:hover {
color: black;
background-color: #CCCCCC;
border-top: 2px solid black;
border-bottom: 2px solid black;
height: 22px;
padding-top: 4px;
}

Da der Rahmen zur Höhe einer Box, sprich in diesem Fall des zum Blockelement gemachten Links, zählt, müssen Sie die Höhe im hover-Zustand anpassen. Sie verringert sich um zwei auf 22 Pixel. Außerdem verringert sich der Innenabstand nach oben (padding-top) um zwei Pixel, damit die Schrift noch an derselben Stelle steht wie im Normalzustand.

Übrigens: Alternativ zum klassisch per CSS realisierten Rahmen können Sie auch ein Hintergrundbild verwenden. Das erlaubt beispielsweise einen Rahmen in verschiedenen Farben oder mit besonderen Mustern. Im Beispiel besteht der Rahmen einfach aus einer schwarzen und einer weißen Linie oben und unten. Das Hintergrundbild hat die Höhe der gesamten Navigationsleiste (hier 30 Pixel), aber nur eine Breite von einem Pixel.

background-image: url(hg_rahmen.png);
background-repeat: repeat-x;

Es hat sich eingebürgert, den Hover-Effekt auch für das jeweils aktive Element zu verwenden. Die einfachste Variante ist, wenn Sie dem aktiven Link noch eine ID oder Klasse mitgeben:

  • Unternehmen
  • Diese können Sie dann als zweiten Selektor neben der hover-Pseudoklasse verwenden:

    #navigation ul li a:hover,
    #navigation ul li a.navi_aktiv {

    }

    Hintergrundbild

    Ein Hintergrundbild können Sie aber natürlich nicht nur für Rahmen verwenden, sondern damit auch eine komplette Rollover-Optik für einen Navigationspunkt oder gar einen Hintergrund für die ganze Navigationsleiste schaffen. Im folgenden Beispiel liegt ein einfacher Verlauf im Hintergrund der einzelnen Menüpunkte. Das zugehörige Bild ist nur ein Pixel breit, aber so hoch wie die Navigationsleiste (30 px). Mit background-repeat wird es dazu gezwungen, sich nur horizontal zu wiederholen (repeat-x).

    #navigation ul li a:hover {
    color: black;
    background-color: #CCCCCC;
    background-image: url(hg_verlauf.png);
    background-repeat: repeat-x;
    }

    Für einen vertikalen Verlauf benötigen Sie statt repeat-xeinfach repeat-y und dazu ein Bild, das nur geringe Höhe, dafür aber eine große Breite hat. Das Problem ist, dass Sie die Breite der einzelnen Navigationspunkte nicht kennen, es sei denn, Sie legen sie explizit für jeden Link fest und richten den Link-Text mit text-align:center mittig aus. Der Nachteil an einer festen Größe ist, dass die Navigationspunkte nicht beliebig lang sein können. Zugegeben, zu lange Navigationspunkte sind nicht sinnvoll. Aber eine feste Größe verhindert leider auch, dass der Nutzer den Navigationspunkt per Schriftgrößenänderung im Browser beliebig skalieren kann.


    Register

    CSS-Menüs

    Ein einfaches Hintergrundbild reicht manchmal nicht aus. Wollen Sie etwa am Anfang und am Ende eines Navigationspunkts abgerundete Ecken definieren, um ein Register zu simulieren, müssen Sie tiefer in die Trickkiste greifen. Das Problem ist, dass wegen der unterschiedlichen Textlängen der einzelnen Navigationspunkte hier nicht im Vorhinein bekannt ist, wie lang ein Link sein soll. Deswegen verwenden Sie zwei sich überlagernde Hintergrundbilder. Um ein zweites Hintergrundbild einfügen zu können, müssen Sie allerdings zuerst noch innerhalb des Links ein span-Element einfügen:

    Die wichtigste Änderung ist nun, dass es zwei Definitionen für den hover-Zustand gibt. Die eine definiert für den Link selbst ein Hintergrundbild, das mit background-position rechtsbündig ausgerichtet wird: Das Hintergrundbild enthält die rechte obere abgerundete Ecke und ist sehr lang, damit es für beliebige Textlängen passt.

    #navigation ul li a:hover {
    color: black;
    background-image: url(hg_rechts.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
    }

    Im selben hover -Zustand wird nun noch ein Hintergrundbild für das span -Tag definiert. Dieses Hintergrundbild enthält nur die linke obere abgerundete Ecke. Damit an der Ecke nicht das Hintergrundbild des Links durchscheint, muss der Teil außerhalb des abgerundeten Rechtecks mit der Hintergrundfarbe gefüllt sein.

    #navigation ul li a:hover span {
    background-image: url(hg_links.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    }

    Ein Problem bei dieser Variante können Farbverschiebungen im Browser sein. Die Hintergrundfarbe des Bildes stimmt dabei in manchen Browsern nicht mit der des Navigationsbalkens überein, da diese vor allem bei PNGs die Farben nicht korrekt darstellen. Oftmals hilft der Wechsel zum GIF-Format, beispielsweise für den Safari. Wenn alles vergebens ist, müssen Sie für die Navigationsleiste statt einer Hintergrundfarbe ein Hintergrundbild definieren, das als einzigen Pixel einen Pixel in der gewünschten Farbe enthält und sich dann horizontal und vertikal wiederholt.

    Ein zweites Problem ist, dass der Internet Explorer über dem Text im span-Tag einen Textcursor statt des normalen Mauszeigers einblendet. Dies können Sie ändern, indem Sie den CSS-Befehl cursor: pointer; verwenden.

    Fazit

    Wenn Sie die Grundlagen des CSS-Navigationsdesigns beherrschen, geht es eigentlich nur noch darum, die richtige Idee zu entwickeln. Dabei helfen natürlich Anregungen und schöne Umsetzungen im Web, wie zum Beispiel in der sehr guten Sammlung von Dr. Web präsentiert: . Oder aber Sie nehmen sich einfach eine Bildbearbeitung und eine Basis-CSS-Navigation und beginnen damit, diese ein wenig weiterzuentwickeln. Haben Sie erstmal ein paar Farben, Basisschriftarten und Hintergründe ausprobiert, kommen Sie schnell zu neuen Variationen, die praxistauglich sind und zu Ihrer Website passen.