Kolumne: Dino talks

Bootstrap: Kontextabhängige Navigationsleisten
Kommentare

Wenn Seiten zu viel Inhalt bieten, reicht ein Scrollbalken zur Navigation möglicherweise nicht aus. Mit einem Scrollbalken kann man zwar im Inhalt nach oben und unten gehen, doch lässt sich die richtige Stelle so kaum finden. Ein Scrollbalken reagiert eben nur auf Mausbewegungen und nicht auf den Inhalt, durch den man damit scrollt. In Bootstrap ist ein Affix eine Art Breadcrumb, das den Inhalt einer Seite strukturiert und einen visuellen Hinweis auf die aktuelle Position gibt, statt wie bei normalen Breadcrumbs für eine Website. Wenn der Benutzer durch die Seite scrollt, wird die Navigationsleiste mit Links zu Abschnitten des Inhalts dank des Affix am oberen Rand der Seite angeheftet und bleibt ständig sichtbar.

In den letzten Jahren und eigentlich schon seit der Verbreitung der Smartphones hat die Größe des in Webseiten angezeigten Inhalts beträchtlich zugenommen. Das mag zunächst etwas sonderbar klingen, doch immerhin ist durch das Smartphone das Scrollen des Inhalts mit dem Finger und dem Mausrad zu einer natürlichen Geste geworden. Im Ergebnis kommt es recht häufig vor, dass dem Benutzer heute Seiten mit umfangreichen Inhalten zum Scrollen angeboten werden. Wenn Sie als Benutzer durch einen potenziell sehr großen Inhalt scrollen, verlieren Sie leicht die Orientierung, wo Sie sich im Dokument gerade befinden und was der eigentliche Inhalt ist.

Breadcrumbs haben lediglich die Aufgabe, Ihnen eine Struktur des Inhalts zu zeigen, der immer sichtbar ist. Selbst wenn Breadcrumbs ursprünglich eingeführt wurden, um eine Struktur der gesamten Website wiederzugeben, handelt es sich unterm Strich lediglich um eine Liste einschlägiger Links, die sich an praktisch jeden Abschnitt der Site anpassen lässt.

In diesem Artikel stelle ich mit Affix ein attraktives Feature vor, das nur wenige Websites bieten, das aber vor allem für Seiten äußerst interessant ist, die große Markup-Blöcke enthalten. Das so genannte Affix kombiniert eine Navigationsleiste, die in der Art von Breadcrumbs Verweise zu Abschnitten auf der Seite auflistet, mit Inhaltssegmenten, die in Abschnitte gegliedert sind. Sobald Affix aktiviert ist, überwacht es das Scrollen durch den Benutzer und spiegelt die aktuelle Position in der Navigationsleiste wider. Am Ende ist Affix eine Art kontextabhängiges Breadcrumb, das den Inhalt einer einzelnen Seite abbildet. Twitter Bootstrap bietet eine integrierte Komponente, mit der sich ein Affix implementieren lässt. Sehen wir uns an, wie das funktioniert.

Affix ist nicht der beste Teil von Bootstrap

Die Überschrift dieses Abschnitts sagt alles. Affix ist ein ziemlich komplexes Plug-in, und es ist zudem schlecht dokumentiert. Immerhin kann man es mit ein wenig Aufwand und Konzentration zu einer zufriedenstellenden Arbeitsweise bewegen, obwohl man – meiner Erfahrung nach – kaum alle Aspekte dieses Features steuern kann. Um das gesteckte Ziel zu erreichen, muss man zunächst die Bootstrap-Dokumentation beiseite legen und erst zu ihr zurückkehren, wenn man es geschafft hat, einige lauffähige Affix-Beispiele zu kreieren.

Vorbedingungen für ein Affix

Wenn Sie ein Affix verwenden, müssen Sie das BODY-Tag der Seite bearbeiten. Im Kontext einer ASP.NET-MVC- oder sogar Web-Forms-Anwendung kann das bedeuten, dass Sie eine andere Masterseite verwenden müssen oder Änderungen an der primären Masterseite vornehmen müssen, um in der Lage zu sein, dem BODY-Element Attribute hinzuzufügen. Der minimale Inhalt für ein BODY-Element sieht wie folgt aus:


Das Attribut data-spy zeigt an, dass der gesamte Inhalt des Bodys überwacht wird. Dies ist der erste heikle Punkt. Wenn Sie die Seite überwachen möchten, müssen Sie den Body überwachen. Der Grund dafür ist, dass der Scrollbalken zum Body gehört. Ehrlich gesagt habe ich nie eine Alternative versucht, doch wenn Sie einen Abschnitt der Seite überwachen möchten, müssen Sie vermutlich sicherstellen, dass das DIV einen Scrollbalken anzeigt. Doch wird das nicht der Scrollbalken des Browsers sein. Das Attribut data-target spezifiziert die ID des DOM-Elements, das als Wrapper für die Navigationsleiste dient, die mit dem Scrollbalken synchronisiert wird. Die typische Gesamtstruktur einer Seite mit einem Affix-Plug-in sieht so aus:

  

Das Codefragment geht von einer vertikalen Sidebar (links oder rechts) aus, die fest bleibt und ständig sichtbar ist, wenn der übrige Inhalt gescrollt wird. Wie Sie den horizontalen Platz zwischen Sidebar und Inhalt aufteilen, bleibt Ihnen überlassen. Mit der Bootstrap-Notation im Codefragment habe ich ihn auf zwei bis zehn Spalten bei großen Bildschirmen und drei bis neun Spalten für mittlere Bildschirme eingerichtet. Außerdem verschwindet die Sidebar bei kleinen Bildschirmen ganz.

Des Weiteren ist es wichtig, dass die Elemente im Breadcrumb und die Elemente im Inhaltsabschnitt übereinstimmende IDs haben. Letztlich verhält sich Affix wie ein seiteninternes Menü mit Links auf Abschnitte innerhalb der Seite, außer dass das Affix-Plug-in das Scrollen erkennt und den Breadcrumb-Eintrag hervorhebt, der dem Abschnitt am oberen Rand des Bildschirms entspricht. Der folgende Code gibt ein Beispiel für den Inhaltsabschnitt an:

Bio

Lorem ipsum dolor …

Vital Stats

Lorem …

Im Beispiel verwende ich spezifische HTML5-Elemente wie ARTICLE und SECTION. Wenn Sie möchten, können Sie genauso gut einfache DIV-Elemente verwenden. Die Struktur des Breadcrumbs sieht entsprechend so aus:

Beachten Sie das Attribut data-spy, das erforderlich ist, damit die ganze Geschichte funktioniert. Mit der bislang erstellten Lösung ist das Affix zwar schon funktionsfähig, jedoch sind noch keine der erwarteten Effekte sichtbar. Es ist noch einige CSS-Arbeit erforderlich und hierfür gibt es sehr wenig Dokumentation auf der Bootstrap-Website. Bevor ich aber mit CSS-Tricks fortfahre, möchte ich einige Worte zur Reaktionsfähigkeit der Lösung verlieren. Die Lösung rendert gut, wenn Sie das Browserfenster in der Größe ändern. Dennoch überlappt sich der Inhalt mit dem statischen Breadcrumb, wenn Sie den Inhalt horizontal in der Größe ändern. Das hängt mit einigen der notwendigen CSS-Einstellungen zusammen, die Sie gleich kennenlernen werden. Es gibt zwei Workarounds: Zum einen können Sie das Breadcrumb für mittelgroße Bildschirme ausblenden; zum anderen geben Sie dem Inhalt eine durchgehende Hintergrundfarbe. Im obigen Beispiel wird das DIV-Element, das den Abschnitt mit dem Inhalt enthält, auf einen weißen Hintergrund gesetzt. Wenn Sie einen transparenten Hintergrund ausprobieren, werden Sie den hässlichen Effekt sehen, den ich eben erwähnt habe.

Affix Style Sheets

Die zentralen CSS-Klassen für das Affix-Plug-in sind: affix, affix-top und affix-bottom. Dabei sind Sie dafür zuständig, die Stile für diese Klassen bereitzustellen. Diese Klassen beziehen sich auf das UL-Element, das Links im Breadcrumb auflistet. Als Minimum brauchen Sie folgende Einstellungen:

ul.affix {
  position: fixed;
}

ul.affix-top {
  position: static;
}

ul.affix-bottom {
  position: absolute;
}

Kurz gesagt gehen alle HTML-Elemente standardmäßig von einer statischen Position aus und werden immer entsprechend dem normalen Fluss der Seite gerendert. Das Attribut fixed positioniert ein Element relativ zum Browserfenster, sodass das Element selbst dann nicht verschoben wird, wenn man das Browserfenster scrollt. Schließlich bewirkt die Positionierung absolute, dass das Element relativ zum ersten übergeordneten Element positioniert wird, das eine andere Position als static besitzt.

Die Klasse affix-top zeigt an, dass sich das Breadcrumb innerhalb der Seite in der obersten Position befindet. An diesem Punkt ist keine CSS-Positionierung erforderlich; praktisch ist die Position im CSS statisch. Wenn die Seite über das Element hinaus gescrollt wird, wechselt das Plug-in zur Affix-Klasse und setzt das Breadcrumb auf eine feste Position. Die Klasse affix-bottom ist eigentlich nur erforderlich, wenn ein Offset zum unteren Rand hin definiert wird. In diesem Fall wird das Breadcrumb absolut dort positioniert, wo es durch das untere Offset angegeben ist.

Zusammenfassung

Wenn Sie ein Affix verwenden, können Sie trotzdem noch im Breadcrumb auf externe Links Ihrer Wahl verweisen, genau wie auf Links innerhalb der Site. Dadurch ist es sowohl möglich, dem Benutzer mit einem Affix die Position im Dokument mitzuteilen – gewissermaßen in Form eines intelligenten Scrollbalken – als auch eine ausgewachsene Navigationsleiste mit Links auf andere Seiten zu realisieren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -