Navigation und Verlinkung

Struktur durch CSS

Eine gut strukturierte Website erleichtert den Benutzern die Navigation. Nicht alle Navigationselemente eignen sich jedoch gleich gut dazu. Lesen Sie, was Sie bei der internen Seitenverlinkung beachten sollten.

  1. Struktur durch CSS
  2. Die dritte Ebene
internet, webdesign, css, navigation, verlinkung, website, navigationselemente

© Andreas Hitzig, Daniela Schrank

internet, webdesign, css, navigation, verlinkung, website, navigationselemente

Eine gut durchdachte Navigation verknüpft mit einer optimalen internen Verlinkung bietet zahlreiche Vorteile: Ihre Besucher kommen schneller an die gewünschten Informationen, aber auch die Platzierung Ihrer Website in der Trefferliste der Suchmaschine wird dadurch positiv beeinflusst.Ein Crawler oder Spider erfasst jede Seite einer Website einzeln. Für die Gewichtung der Seite spielt es eine Rolle, auf welcher Hierarchiestufe sich diese befindet, aber auch wie viele Verlinkungen intern auf die Webseite zeigen. Damit spielt der Aufbau der Website, aber vor allem die interne Verlinkung eine zentrale Rolle.

Gießkanne oder Abkürzung?

Beim Aufbau einer Website stehen Ihnen für die Verlinkung zwei wesentliche Vorgehensweisen zur Verfügung: Entweder Sie verlinken streng hierarchisch und immer noch von der höheren in die tiefere Ebene - das Gießkannenprinzip - oder Sie erlauben auch Abkürzungen, mit denen Sie beispielsweise wichtige Artikel vorstellen.Die Website von Spiegel.de besteht aus einer Vielzahl von Rubriken, wie etwa Politik, Wirtschaft oder Sport. Auf der Startseite finden Sie die wichtigsten Artikel aus den einzelnen Bereichen. Nach dem Anklicken gelangen Sie auf den vollständigen Bericht innerhalb der entsprechenden Rubrik. An diese Stelle wären Sie auch gelangt, wenn Sie sich über die Menüstruktur entlanggehangelt hätten.

Den Überblick nicht verlieren

internet, webdesign, css, navigation, verlinkung, website, navigationselemente

© Andreas Hitzig, Daniela Schrank

Der Online-Shop von Amazon.de bietet auf seiner Website eine Navigationshilfe in den Rubriken und eine Orientierungshilfe an.

Wenn Sie solche Abkürzungen auf Ihrer Website erlauben und einplanen, sollten Sie Ihren Besuchern helfen, damit diese nicht den Überblick verlieren. Viele Websites bedienen sich hierfür einer entsprechenden Orientierungshilfe: Unterhalb der Navigationsleiste finden Sie in Textform die Rubrik inklusive aller Unterrubriken wieder, in der Sie sich gerade befinden.Auf diese Darstellungsform greifen viele Websites, wie Bild.de, Spiegel.de oder auch Amazon zu. Der Online-Shop nutzt an dieser Stelle sogar zwei Stellen für die Darstellung der aktuellen Position im Shop: Auf der linken Seite haben Sie die Möglichkeit, sich immer weiter entlangzuhangeln und Ihre Treffermenge einzuschränken, oberhalb der Trefferliste sehen Sie parallel dazu, an welchem Ort Sie sich befinden.

Auf der richtigen Spur

Damit auch die Suchmaschinen den Überblick nicht verlieren, sollten Sie - nachdem Ihre Website einen gewissen Umfang erreicht hat - mit der Zusammenstellung von themenbezogenen Sitemaps beginnen. Diese Orientierungskarten nutzen nicht nur die Crawler der Suchmaschinen gerne, auch interessierte Leser finden auf diese Weise thematisch ähnliche Artikel schneller wieder.Ebenfalls hilfreich ist ein Verweis am Ende des Artikels auf andere Beiträge mit ähnlichem Inhalt. Damit haben Sie zum einen eine Abkürzung geschaffen, zum andern auch die Wertigkeit des Artikels im internen Ranking erhöht.

Umsetzung der Verlinkung

internet, webdesign, css, navigation, verlinkung, website, navigationselemente

© Andreas Hitzig, Daniela Schrank

Ohne CSS haben Sie eine einfache Liste mit Aufzählungszeichen.

In den folgenden Beispielen zeigen wir Ihnen, wie Sie CSS für den Aufbau einer optimierten Navigation innerhalb einer Website einsetzen und was Sie dabei hinsichtlich der Browser-Kompatibilität beachten sollten.Aufgrund der verschiedenen Browser am Markt ist es sehr schwierig, eine Navigation komplett auf CSS aufzubauen, da gerade ältere Modelle wie der Internet Explorer 6 teilweise Probleme mit der Interpretation der Formatierungen haben. Diesem Umstand haben sich mehrere Entwickler gewidmet und dabei kam ein Skript heraus, das seitdem unter dem Namen Suckerfish zu finden ist.

internet, webdesign, css, navigation, verlinkung, website, navigationselemente

© Andreas Hitzig, Daniela Schrank

Mit ein wenig CSS erinnert nichts mehr an eine Aufzählung.

Es geht auf einen Artikel zweier Entwickler aus dem Jahre 2003 zurück, die ihn unter dem Namen "Suckerfish Dropdowns" (www.alistapart.com/articles/dropdowns/ ) publiziert haben. Das Skript ist dann im Laufe der Zeit mehrfach verbessert worden und lebt heute unter dem Namen "Son of Suckerfish" im Internet weiter. Auf Basis des Skripts und mithilfe von CSS verwandeln wir eine normale Aufzählungsliste in eine mehrstufige horizontale und vertikale Navigation.

Das HTML-Grundgerüst

Ohne weitere Formatierungen stellen die Zeilen HTML-Code nichts anderes als eine Liste mit mehreren Hierarchiestufen dar.Im Beispiel wird bewusst neben den Überschriften mehr als eine Hierarchiestufe eingefügt, da vor allem die Positionierung der dritten Ebene einige Anfangsprobleme macht. Für den späteren Zugriff auf die Elemente erhält das erste <ul>-Tag eine ID mit dem Namen navi.

<ul id="navi"><li><a href="#">Home</a></li><li><a href="#">Ueber uns</a><ul><li><a href="#">Team</a></li><ul><li><a href="#">Manuel Neuer</a></li><li><a href="#">Lukas Podolski</a></li><li><a href="#">Bastian
Schweinsteiger</a></li></ul><li><a href="#">Trainer</a></li></ul></li></ul>

Mit den ersten Formatierungen für alle Elemente und im Besonderen für die Liste werden alle Aufzählungszeichen entfernt und der Außenabstand sowie der Innenabstand auf 0 gesetzt.

#navi, #navi ul {
padding: 0;
margin: 0;
list-style: none;
}

Alle Listenelemente wandern wie erwartet ohne Aufzählungszeichen an den linken Rand des Browserfensters. Als Nächstes erhalten nun alle Elemente einen virtuellen Kasten außen herum mit einer Breite von 10em und der Darstellung als Block.

#navi a {
display: block;
width: 10em;
text-decoration: none;
padding: 5px;
}

Im nächsten Schritt erfolgt die horizontale Anordnung der Elemente. Dazu wird für jeden einzelnen Punkt in der Liste in Ebene 1 - gekennzeichnet durch den <li>-Tag, eine neue Spalte mit der Breite von 10em eröffnet.

#navi li {
float: left;
width: 10em;
}

Noch immer sind alle Elemente sichtbar - die Einträge der zweiten Ebene machen Sie fürs Erste über die Startposition von links unsichtbar. Verschieben Sie den Startwert um -999em, ist von den Werten nichts mehr zu sehen.

#navi li ul {
position: absolute;
width: 10em;
left: -999em;
}

Diese Formatierung hängt an allen Punkten einer Liste, denen eine neue ungeordnete Liste mit einem <ul>-Tag startend folgt. Nachdem Sie die Liste ausgeblendet haben, möchten Sie diese bei einem :hover-Ereignis natürlich wiedersehen. Dazu setzen Sie entsprechend die CSS-Formatierung der linken Startposition auf auto und es wird der Wert herangezogen, der vor der Verschiebung um 999em gültig war.

#navi li:hover ul {
left: auto;
}

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.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".