JavaScript: Smart Fixed Navigation statt "Back to top"-Button
Kommentare

Websites mit vielen Inhalten und Kategorien offerieren ihren Besuchern in der Regel eine Möglichkeit, um den Nutzer schnell zurück zum Seitenanfang zu führen, damit er dort auf die Menünavigation zugreifen

Websites mit vielen Inhalten und Kategorien offerieren ihren Besuchern in der Regel eine Möglichkeit, um den Nutzer schnell zurück zum Seitenanfang zu führen, damit er dort auf die Menünavigation zugreifen kann. Seit Jahren hat sich dafür der gute, alte „Back to top“-Button bewährt. Doch warum sollte man den User unbedingt zurück nach oben schicken? Man könnte ihm doch die Menünavigation direkt an der Position anbieten, an der sich der „Back to top“-Button befindet?

Smart Fixed Navigation

Das hat sich auch UI-/UX-Designer Sebastiano Guerriero gedacht und präsentiert mit der „Smart Fixed Navigation“ einen interessanten und kostenlosen Lösungsansatz mit JavaScript. Seiner Meinung nach ist es in 90 Prozent aller Fälle unnötig, den User wieder nach oben zur Menünavigation zu schicken. Für die restlichen 10 Prozent kann man entweder eine „Secondary Expandable Navigation“ oder eben den „Back to top“-Button einbauen.

Auf Codeseite ist die Struktur sehr geradlinig angelegt: Die Navigation und ihr „Trigger“ befinden sich innerhalb desselben #cd-nav div. Mithilfe von innerhalb des Anchor-Tags .cd-nav-trigger wird das Menü-Icon nur mit CSS generiert. Weiter Details zum Styling und dem Events-Handling findet man in Guerrieros Blogbeitrag.

Die „Smart Fixed Navigation“ ist übrigens kompatibel mit Chrome, Firefox, Safari, Opera und Internet Explorer ab Version 9.

Folgendes GIF zeigt die Funktionsweise der „Smart Fixed Navigation“:

Smart Fixed Navigation

Hier gibt es eine Demo der „Smart Fixed Navigation“.

Ideallösung?

In wie fern die Positionierung des „Smart Fixed Navigation“-Buttons unten rechts optimale ist, sei dahin gestellt. Der eine oder andere Nutzer dürfe den Button auf mobilen Geräten, beispielsweise auf einem Smartphone, mit seinen eigenen Fingern verdecken. Und auf iOS-Geräten gesellt sich ferner noch die Problematik hinzu, dass im Safari-Browser bei einem Tap am unteren Seitenende das Menü mit den Vor/Zurück-Buttons, den Tabs, etc. geöffnet wird – eine Funktion, die seit ihrer Einführung mit iOS 7 viel Kritik hervorgerufen hat.

 

Aufmacherbild: Screenshot http://codyhouse.co/gem/smart-fixed-navigation/

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -