nicht angemeldet
Hilfe zum responsiven Flyout-Menü
0 0 
marctrix
Hilfe zum responsiven Flyout-Menü
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!
-
hallo
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ü
2012 ist schon einiges her.
Inzwischen verwenden wir direkt das <nav> Element an stelle von <div id="nav"> Auch wird man heute display:flex statt float einsetzen.
Es wäre schön, wenn dein Problem öffentlich nachvollziehbar wäre (z.B. auf codepen)
-
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