Hilfe zum responsiven Flyout-Menü

[marctrix]

Hej Godspeed,

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.

Gut so und herzlich willkommen hier!

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

Das ist aber veraltet und kaputt.

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.

Die Browser haben fast alle Button-Leisten und Bedienelemente bis hin zur status- und Menüleiste wegrationalisiert, damit für die Inhalte der Website mehr Platz bereit steht und du willst den gewonnenen Platz nun mit dem Menü „verplempern“? 😉

Tipp: biete das Menü am Ende der Seite einfach noch mal an, dann kommt man am Ende der Seite an eine Möglichkeit nach der Lektüre der eigentlichen Inhalte weiter zu lesen — und zwischendurch einen Link zum Seitenanfang (also dem Menü oben) der mitscrollt. So bleibt der Platz für die eigentlichen Inhalte frei.

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.

Ja, da hast du dich für den Anfang etwas übernommen. Das ist jetzt natürlich eine Menge Holz, was du dir da beibringen müsstest. Damit du es besser verstehst, solltest du das ganze CSS wegwerfen und das Menü auf die eigentlichen Menüpunkte reduzieren. Der Menü-Schließen-Link ist nämlich falsch. Der hat nichts in der Liste zu suchen und muss ein Button sein. Aber dazu dann vielleicht später mehr. Bist du bereit, das zu verstehen, was du da machen willst ? Dann lass uns das Schritt für Schritt durchgehen. Du wirst hier auch bessere Lösungen als die von dir vorgestellte bekommen, nur wäre es vielleicht besser, erst mal zu verstehen, was wie machbar ist?!?

Marc