Godspeed: Hilfe zum responsiven Flyout-Menü

Beitrag lesen

Hallo!

Ich bin dabei eine Seite zu erstellen und möchte da ein responsives Menü einbinden. Nun kenne ich mich mit CSS noch gar nicht so aus und ich versuche mich da nun reinzufuchsen.

Dazu habe ich das Beispiel auf folgender Seite gefunden: Responsives Flyout-Menü

Nun habe ich das Menü schon so weit angepasst, das es nicht am oberen Rand auftaucht, sondern unterhalb eines Logos auf der Seite.

Beim Scrollen "rutscht" das Menü dann auch nach oben weg. Hier wäre es dann schön, wenn es oben am Bildschirmrand hängen bleiben würde, so das man, egal wie weit man scrollt, immer Zugriff auf das Menü hat.

Wenn man nun aber einen kleinen Bildschirm hat (Smartphone), wo der Menü-Button dann ziemlich weit unten am Display erscheint und man dort draufklickt, springt das ganze Bild nach oben, so dass das ganze Menü zu sehen ist. Diesen Sprung finde ich störend und es wäre schöner, wenn das Menü einfach nach unten ausklappt, ohne dass der Bildschirm springt, auch wenn dann die Hälfte des Menü noch nicht sichtbar ist. Noch schöner, wenn das Menü, wie im Beispiel, animiert nach unten ausfährt. Das funktioniert aber wohl so nicht ganz, wenn das Menü nicht, wie im Beispiel, dauerhaft oben am Bildrand angepinnt ist.

Und dann würde ich das normale Menü (mit allen Auswahlen - also für größere Bildschirme) zentriert angezeigt bekommen. Nun ist es immer linksbündig.

Kann mir jemand dabei helfen, wie ich das "normale" Menü zentriert angezeigt bekomme, der Bildschirm beim Ausklappen des reduzierten Menü nicht springt und dass das Menü beim Scrollen nach unten oben am Bildrand hängen bleibt?

Vielen Dank!