HTML Webdesign

Sticky Menu, Feststehendes Menü

Sticky Menu, Feststehendes Menü HTML

Ein Sticky Menu bzw. feststehendes Menü mit HTML als Mobile Menü realisieren, welches sich beim scrollen dynamisch anpasst: Realisation eines Sticky Header Menu.

Lässt sich eine Sticky Menu bzw. feststehendes Menü mit HTML und CSS realisieren, ohne JavaScript einzusetzen? Die Antwort lautet: Ja.

Diese Anleitung stellt eine Sticky Menu Lösung vor, die zugleich responsive ist. Auf mobilen Geräten wie dem Smartphone passt sich das Menü an und wird zum Mobile Menü.

In diesem Fall setzen wir allerdings die jquery und etwas JavaScript-Code ein, um überprüfen zu können, ob der Benutzer nach unten scrollt. Ist dies der Fall, so wird über CSS das Erscheinungsbild des Sticky Menu angepasst: die Höhe des Navigationsbereichs im Header reduziert sich, um mehr Platz für die Darstellung des Contents zur Verfügung zu haben.

BEISPIEL ANSEHEN

Realisation eines Sticky Menu / feststehenden Menü mit HTML

Prinzipiell können wir den Code natürlich auch „verschlanken“, den JavaScript-Teil entnehmen und mit einigen kleineren Änderungen am CSS den Navigationsbereich im Header fixieren. Dadurch fehlt zwar die Möglichkeit, das Scrollverhalten des Benutzers zu prüfen und entsprechend zu interagieren. Im Gegenzug hätten wir jedoch ein schnelles und schlankes responsives Sticky Menu, welches einige Vorteile bietet:

  1. Es konzentriert sich auf das Wesentliche, ohne dass der Code aufgebläht wird und trägt damit der Idee des Mobile First Rechnung. Denn seit Oktober 2016 prüft auch Google zuerst, ob es eine mobile Version der Website gibt und ob diese über eine hohe Usability verfügt. Dazu gehören unter anderem auch kleine Datenmengen und schnelle Ladezeiten.
  2. Schlanke Webseiten mit geringen Datenmengen und schnellen Ladezeiten erhalten von Suchmaschinen einen Bonus, der sich positiv auf das Ranking auswirkt.

Ein solches schlankes Mobile Menü ohne JavaScript stellen wir hier vor.

Der Animationseffekt für das Mobile Menü besteht übrigens auch ohne den Einsatz von JavaScript fort, da er über CSS3-Transitions erzielt wird.

Wie lässt sich das Design unseres Beispiels umsetzen?
Der Aufbau für das Mobile Menu entspricht der unter Mobile Menü ohne JavaScript vorgestellten Lösung und wird dort ausführlich erklärt.

Nachfolgend stellen wir daher den Code vor, beschränken uns bei den Erläuterungen aber auf die Bereiche, die zusätzlich zu integrieren sind, um nicht nur ein Mobile Menü zu kreieren, sondern dieses auch als Sticky Menu bzw. feststehende Menü zu realisieren:

Bereich: Head

 

HTML (Body)

 

CSS: Allgemeine Auszeichnungen und Logo

 

CSS: Menü

 

CSS: Content

 

CSS: Media Queries

Erläuterung des CSS für die Erstellung des Sticky Menu / festehenden Menüs

Die drei vorstehenden Codebereiche HTML (Body), CSS: Allgemeine Auszeichnungen und Logo sowie CSS: Media Queries werden bereits in der Anleitung Mobile Menü ohne JavaScript erklärt.

Ergänzungen bzw. Erweiterungen für das Sticky Menu finden sich in den drei Codeblöcken Bereich: Head, CSS: Menü sowie CSS: Content.

Wir blicken hinter die Kulissen

  1. Bereich: Head
    Zunächst wird die jquery über googleapis.com eingebunden.
    Mit einigen Zeilen JavaScript wird erreicht, dass ab einem Scrollen um 150 Pixel nach unten die Bezeichner mit der ID #menu sowie #main um die Klasse .fixed ergänzt werden.
    Beträgt das Scrollen weniger als 150 Pixel, so greift die ELSE-Anweisung und die Klasse .fixed wird wieder entfernt.Damit erhalten wir die Möglichkeit, beim Scrollen um mehr als 150 Pixel nach unten den Bereich über CSS der Form #menu.fixed anzusprechen.
  2. CSS: Menü
    Ergänzend zum Mobile Menü ohne JavaScript findet sich hier der Bereich
    /*—– Fixed Menu —–*/
    Das CSS teilt dem Browser mit, wie das Sticky Menu bzw. feststehende Menü behandelt werden soll, wenn die zuvor erwähnten mehr als 150 Pixel nach-unten-scrollen erreicht sind.
  3. CSS: Content
    Dieser Bereich ist weitestgehend selbsterklärend. Das für Demonstrationszwecke erstellte Demo Sticky Menu referenziert nicht auf eigene (neue) Inhaltsseiten. Sondern beim Anklicken der Menüpunkte wird Mittels Anchor (= Anker) zu dem entsprechenden Bereich auf der Seite gesprungen und der jeweilige Bereich entsprechend über das CSS formatiert.

Fazit: die Anleitung zur Erstellung eines Sticky Menu / feststehenden Menüs inklusive Mobile Menu für mobile Endgeräte basiert auf der unter Mobile Menü ohne JavaScript vorgestellten Lösung. Ergänzend wurde noch ein Sticky Menu integriert und zur besseren Visualisieren ein Anker-Menü zu Inhaltsbereichen mit unterschiedlichen Hintergrundfarben integriert

Stichworte: Sticky Menu, Sticky Header Menu, Feststehendes Menü HTML

0 Kommentare zu “Sticky Menu, Feststehendes Menü

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wir benutzen First Party Cookies, um die Nutzerfreundlichkeit der Webseite zu verbessen.