Der Tipps-Blog! Jetzt weißt du wie es geht!

Das Tippsforum

Wie erstellt man eine schöne Navigation mit HTML und CSS?

Möchte man seine Besucher auf der eigenen Website durch visuelle Reize ein wenig zum Bleiben verlocken, gehört auf jeden Fall erst einmal die Einrichtung einer angenehmen und formschönen Navigation dazu.

Wir gehen davon aus, dass wir unsere Links in einer ungeordneten Liste untergebracht haben:

<ul>
<li class=”NaviLink”>Ein Link</li>
<li class=“NaviLink“>Noch ein Link</li>
</ul>

Nun definieren wir in unserem Stylesheet, wie die Links aussehen sollen. Einen Stylesheet erkennt man an der Endung „.css“. Wir definieren wie folgt:

.NaviLink { display: block; color: #000; text-decoration: underline; }

Jetzt sind alle Links, welche die Klasse „NaviLink“ besitzen, schwarz, und sind nicht länger unterstrichen. „Display:block“ bedeutet, dass der Link über die ganze Breite und Höhe des übergeordneten Elements anklickbar ist. Das übergeordnete Element ist hier das Listenelement „<li>“. Das erleichtert dem Besucher die Navigation durch die Seite.

Schon sehr schön, aber was passiert, wenn wir mit dem Mauszeiger über den Link fahren? Die Linkfarbe sollte sich ändern, damit der Benutzer auch sieht, welchen Verweis er gerade ausgewählt hat. Dies nennt man einen „Hover-Effekt“. Wir definieren also folgendes dazu:

.NaviLink:hover { color: #ff9900; text-decoration: underline; }

Beim Überfahren des Links durch den Mauszeiger ändert er nun seine Farbe in Orange und wird zudem unterstrichen dargestellt.

Möchten wir zum Schluss noch die Listenpunkte eliminieren, die der Browser automatisch vor jedes Listenelement setzt, müssen wir lediglich folgende Anweisung in unseren Stylesheet schreiben:

ul { list-style-type: none; }

Und schon haben wir eine schöne und übersichtliche Navigation mit HTML und CSS erstellt. Jetzt noch schnell den Stylesheet in das Dokument einbinden. Das passiert so:

<link rel=“stylesheet“ src=“MeinStylesheet.css“>

Fertig!