Wie man ein Menü am oberen Rand der Seite anheftet

‍Ein Sticky-Header ist eine Navigationsstruktur, die beim Herunterscrollen einer Webseite ihre Position am oberen Rand des Browserfensters beibehält, anstatt aus dem Sichtbereich zu scrollen. Die Navigationsstruktur kann anfangs weiter unten auf der Seite platziert sein. Es handelt sich um ein häufig verwendetes Element, und wenn Ihre Website viele Inhalte hat, sollten Sie wahrscheinlich zumindest eine einfache Variante davon umsetzen, etwa eine Navigationsleiste mit einem Menü.

‍Um einen einfachen Header zu erstellen, platzieren Sie zunächst einige Textschaltflächen auf einer breiten Box. Die Schaltflächen verlinken zu Seiten Ihrer Website oder zu Scroll-Positionen auf derselben Seite. In der Regel reichen 3 bis 5 Schaltflächen aus, um die wichtigsten Funktionen einer Website hervorzuheben, ohne die Leiste zu überladen. Alternativ kann auch ein Menüelement anstelle von Schaltflächen verwendet werden. Wählen Sie alle Schaltflächen und die breite Box aus, klicken Sie mit der rechten Maustaste, um das Menü zu öffnen, und wählen Sie Gruppieren, oder wählen Sie Gruppieren über das Menü Anordnen oben auf dem Bildschirm. Die neu erstellte Gruppe bietet in der Registerkarte Stil die Option Am oberen Rand anheften.

‍Aktivieren Sie das Kontrollkästchen Am oberen Rand der Seite anheften; nun bleibt Ihre Gruppe am oberen Bildschirmrand angeheftet. 

‍Denken Sie daran, mögliche visuelle Konflikte zu berücksichtigen, die durch die Bewegung Ihres Headers entstehen können. In diesem Beispiel sorgt ein weißer Rand an der Hintergrundbox des Headers dafür, dass er sich deutlich vom Seiteninhalt abhebt, wenn er davor positioniert ist, und er ist konsistent mit den weißen Rändern, die wir zur Trennung von Elementen auf unseren Seiten verwenden. Konsistenz ist wichtig und bietet oft natürliche Lösungen – so auch in diesem Fall.

‍Beachten Sie: Befindet sich der Header anfangs nicht am oberen Bildschirmrand, wird er beim Scrollen dort angeheftet, sobald er ihn berührt. Außerdem erfolgt das Anheften in dem Moment, in dem die erste Komponente Ihres Headers Kontakt hat. Die Strukturierung und die relative Positionierung der Komponenten Ihres Headers bleiben erhalten.

‍Mit anderen Worten: Wenn ein Sticky-Header nicht direkt am oberen Bildschirmrand anheften soll, fügen Sie eine unsichtbare Box dazwischen ein und nehmen Sie diese in die Header-Gruppe auf.