it-swarm.com.de

Wie heißt das Navigationskonzept Bootstrap verwendet?

Die Dokumentationsseite Bootstrap verwendet ein sehr interessantes Navigationskonzept.

Sie verfügen über eine Navigationsleiste pro Seite, die nach dem Scrollen oben auf der Seite angezeigt wird und den aktuellen Bereich auf der Seite hervorhebt.

Hier ist ein Screenshot der Navigationsleiste, wenn Sie sich oben auf der Seite befinden.

enter image description here

Das rote Rechteck ist nicht Teil des Designs. Es wird verwendet, um hervorzuheben, auf welche Navigationsleiste ich mich beziehe.

Dies ist ein Screenshot derselben Seite, der jedoch etwas nach unten gescrollt wurde.

enter image description here

Beachten Sie, wie sich diese Navigationsleiste plötzlich über die gesamte Breite der Seite erstreckt und immer oben bleibt.

Gibt es einen Namen für dieses Navigationskonzept, wenn ja, wie heißt es?

15

Es gibt keinen gut etablierten Namen für dieses Muster. Der Begriff "klebrige Header" wird normalerweise auf Schnittstellenelemente angewendet, die von Anfang an festgelegt wurden.

Die Tatsache, dass einige Navigationselemente "klebrig" werden, während sie relevant sind, ist ein subtiler, aber interessanter Unterschied. Auf diese Weise bleibt die visuelle Hierarchie trotz Bildlauf erhalten.

Gilles Vandenoostende bezeichnete dieses Muster als Dynamisch feste Benutzeroberfläche . In jüngerer Zeit wurde eine CSS-Position mit dem Namen 'sticky' vorgeschlagen und von Webkit unterstützt für dieses Verhalten verwendet.

Dieser Mechanismus wird auch auf Gruppenüberschriften in Listen auf einigen mobilen Plattformen angewendet. Android Kontakt-App verwendet diesen Ansatz:

enter image description here

7
Pau Giner

Sie nennen es ScrollSpy auf ihrer Site.

Das ScrollSpy-Plugin dient zum automatischen Aktualisieren von Navigationszielen basierend auf der Bildlaufposition.

3
Mononess

Wie andere sagten, gibt es keinen vereinbarten Namen für dieses UI-Muster. Zusätzlich zu "Sticky Element" und "Dynamically Fixed Element" war ein Name, den ich gefunden habe, "Fixed Floating Element".

Ich möchte nur hinzufügen, dass dieses Muster für Symbolleisten und die Navigation am nützlichsten ist. Nichts hindert Sie daran, es für andere Arten von Inhalten zu verwenden. Ich habe gesehen, dass es für nicht wesentliche Navigation, Anzeigen oder sogar den Haupttextinhalt einer Seite verwendet wird (z. B. auf medienreichen Seiten wie Designer- oder Fotografenportfolios).

1
fvsch

Sieht aus wie eine Variation in der Menüleiste "Google". Oben mit Ankern befestigt, die Ereignisse auslösen. Einfach anzubringen (CSS) der Navigationsleiste. Vielleicht ein JQuery-Tool für die Events?

1
Brad Hutchison

Wenn Sie fragen, wie der Name für das Entwurfsmuster einer Navigationsleiste in voller Breite lautet, die am oberen Rand des Ansichtsfensters "haftet", bin ich mir nicht sicher, ob es einen einzigen vereinbarten Namen gibt. Aber ich bezeichne sie allgemein als "feste Navigationsleiste" oder "feste Menüleiste".

0
Rob Flaherty