Anspruchsvollere Menüs zaubern

Navigation mit CSS

Wir zeigen Ihnen, wie Sie aus einer einfachen HTML-Liste in wenigen Schritten mit Style-Sheet-Definitionen ein anspruchsvolleres Menü zaubern und kaskadierende Untermenüs anlegen.

  1. Navigation mit CSS
  2. CSS-Eigenschaft float
image.jpg

© Walter Saumweber, Daniela Schrank

Erstellen Sie zu Beginn ein Menü basierend auf einer Aufzählungsliste. Eine Liste kennzeichnen Sie im HTML-Code mit dem Anfangstag <ul> für unordered list, was so viel heißt wie ungeordnete Liste. Die Bezeichnung bezieht sich auf die Tatsache, dass die Listenpunkte nicht sortiert sind. Einzelne Listenpunkte integrieren Sie mit dem <li>-Tag:

<ul><li>Menüpunkt 1</li>...</ul>

Bedenken Sie bitte, für den Umlaut ü im HTML-Code das Zeichen &uuml; zu notieren. Das, was die HTML-Liste schließlich zur Navigation macht, sind die Anchor- Tags, mit denen Sie die einzelnen Listenpunkte als Verknüpfungen definieren:

<ul><li><a href="">Menüpunkt 1</a></li>...</ul>

Als Wert des href-Attributs geben Sie das gewünschte Verweisziel an wie <li><a href="http://www.meinehomepage.de/urlaub2010/index.htm">Bilder von meinem letzten Urlaub</a></li>.

Eigenschaft list-style

Mit den CSS-Attributen list-style-type, liststyle-position, list-style-image konfigurieren Sie bei Bedarf das Erscheinungsbild von Aufzählungszeichen. Die entsprechenden HTML-Attribute gelten als deprecated. Standardmäßig werden diese mit einem runden schwarzen Punkt als Bullet-Zeichen dargestellt. Mit dem Ausdruck list-style-image:url(<Bilddatei>) geben Sie eine eigene Grafik für das Bullet an, mit list-style-position: inside rücken Sie es ein, während list-style-type die Art des Aufzählungszeichens bestimmt.Die wichtigsten Einstellungen hierzu zeigt die Tabelle. Das Attribut list-style erlaubt es, Werte für list-style-type, list-style-position und list-style-image zusammenzufassen, wobei die Reihenfolge keine Rolle spielt. Es ist auch nicht notwendig, Werte für alle Attribute anzugeben. Wenn Sie für das Design kein Aufzählungszeichen wollen, verwenden Sie die Einstellung list-style: none;. Das Style Sheet platzieren Sie im Head-Bereich des HTML-Dokuments und weisen der Liste im Body das entsprechende class-Attribut zu.

Download: Tabelle

Menüpunkte konfigurieren

Nun verwandeln Sie die Linkliste in eine ansehnliche Menüauswahl, die schon höhere Fähigkeiten dokumentieren. Dazu sind letzten Endes nur ein paar Handgriffe erforderlich. Um die Navigation direkt am linken Fensterrand beginnen zu lassen, verwenden Sie die Einstellung margin: 0; und mit dem Attribut background-color legen Sie eine passende Hintergrundfarbe fest.Falls Sie nicht beabsichtigen, die Liste in eine Tabellenzelle zu integrieren, empfiehlt es sich außerdem, einen Wert für die Breite (CSS-Eigenschaft width) anzugeben. Ansonsten würde sich die Liste bis zum rechten Fensterrand erstrecken. Den Abstand der Menüpunkte zu den Listenrändern korrigieren Sie gegebenenfalls mit dem Attribut padding.

.menu {
list-style: none;
margin: 0;
background-color:
#C0C0C0;
width: 110px; padding:
8px;
}

image.jpg

© Walter Saumweber, Daniela Schrank

HTML-Liste mit Verknüpfungen: Dieses Menü dient als Ausgangspunkt für Ihre weitere Gestaltung.

Nun gilt es noch, das Aussehen der Verknüpfungen anzupassen. Dazu benötigen Sie zusätzliche Style Sheets für die Pseudoklassen a:link (noch nicht besuchter Link) und a:visited (besuchter Link). Für beide unterdrücken Sie zusätzliche Formatierungen wie das Unterstreichen des Textes (text-decoration: none;). Mit der Eigenschaft color bestimmen Sie die Textfarbe und mit font geben Sie die gewünschten Werte für die Schriftformatierung an.

.menu li a:link, .menu li a:visited {
text-decoration: none;
color: #0000A0;
font: 12pt/1.5em arial;
}

Die Angabe 12pt/1.5em für das font-Attribut kombiniert den Wert für die Schriftgröße (vor dem Schrägstrich) mit dem für die Zeilenhöhe (nach dem Schrägstrich - die Maßeinheit em bezieht sich relativ zur Schriftgröße). Mit einem zusätzlichen Style Sheet für die Listenpunkte fügen Sie zwischen diesen dezente Trennlinien ein.

.menu li {
border-top: 1px solid #A580FF;
}

Hovering

image.jpg

© Walter Saumweber, Daniela Schrank

Das Menü gewinnt bereits nach den ersten Korrekturen an Kontur.

Um in Ihrem Menü einen Rollover-Effekt einzurichten, benötigen Sie nicht etwa JavaScript-Code. Mit der CSS-Pseudoklasse a:hover geht es einfacher. Die Einstellungen dieser Klasse kommen zum Tragen, wenn der Benutzer die Maus über das entsprechende Element, hier die einzelnen Menüpunkte, bewegt. In diesem Fall ändern Sie einfach Text- und Hintergrundfarbe. Einen schönen Effekt erzielen Sie, wenn Sie die Hintergrundfarbe transparent machen.

.menu li a:hover {
background-color: transparent;
color: white;
}

Damit ist Ihr Menü an und für sich schon fertig. Zwei Dinge sollten Sie allerdings noch korrigieren:Erstens, um sicherzustellen, dass Ihre Besucher nicht nur den Verknüpfungstext, sondern die ganze Fläche des Menüpunktes als Verweisziel verwenden, konvertieren Sie die Hyperlinks mit der display-Eigenschaft in Blockelemente (standardmäßig sind Anchor-Elemente inline):

.menu li a:link, .menu li a:visited {
...
display: block;
}

image.jpg

© Walter Saumweber, Daniela Schrank

CSS-Attribut display: horizontale Menüleiste oben auf der Webseite.

Außerdem gilt es jetzt noch, auf ein Fehlverhalten des Internet Explorers zu reagieren. Dieser fügt nämlich am unteren Rand der Listenpunkte zusätzlichen Leerraum ein, sobald das display-Attribut verwendet wird. Dies richten Sie ganz einfach, indem Sie für die Hyperlinks eine Einstellung für width hinzufügen. Den Wert geben Sie am besten in Prozent an:

.menu li a:link, .menu li a:visited {
...
display: block; width: 100%;
}

CSS-Buttons

Um in Ihren CSS-formatierten Menüs Schaltflächen zu simulieren, sind folgende Schritte notwendig: Sie vergrößern die Abstände zwischen den einzelnen Listenelementen (Einstellung margin: 0.5em; für das Style Sheet .menu li) und legen für diese eine separate Hintergrundfarbe fest (Attribut background-color in .menu li a:link und .menu li a:visited).Beachten Sie bitte, gegebenenfalls auch die übrigen Einstellungen für margin (Ränder), padding (Innenabstände) und width (Breite) anzupassen. Probieren Sie einfach mehrere Kombinationen aus, um zu sehen, was Ihnen am besten gefällt. Um ganz sicherzugehen, sollten Sie die neuen Einstellungen in mehreren Browsern wie IE und Firefox testen.Des Weiteren sollten Sie die Hyperlinks, also den Bereich der einzelnen Menüpunkte, vollständig umranden. Indem Sie bei der Farbgebung etwas variieren, steigern Sie das Gefühl für die Schaltflächen noch, indem Sie diese beispielsweise mit einer weißen Farbe für den linken und oberen Rand und einer schwarzen Farbe für den rechten und den unteren Rand hervorheben.

.menu li a:link, .menu li a:visited {
...
border: 1px solid black;
border-left-color: white;
border-top-color: white;
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…