CSS mobile screen Verschiebung für Naviagtion?
Guten Abend,
ich bin zurzeit an einem kleinem fiktivem Projekt. Da ich die meiste Zeit desktop-first entwickle, gehe ich das Projekt diesmal mobile-first an. Ich benutze nextjs + tailwindcss.
Auf Bild 1 ist die Frontpage zu erkennen. Erstmal nichts spektakuläres bzw. relevantes für meine Fragestellung.
Auf Bild2 ist ein Prototyp zu sehen, welchen ich im ersten Gedankengang hatte. Mein Vorhaben ist folgendes:
Links von der Frontpage soll die Navigation liegen.
Klickt der User auf einen Burger-Menu Button , verschiebt sich der geamte Screen um die Breite, der Navigation nach rechts. Das ganze soll natürlich schön animiert sein.
Mein erster Prototyp hat die Navigation und die Frontpage absolut gesetzt bekommen. Das Problem an der Sache ist, dass das seitliche scrollen auf dem Handy dann noch möglich ist. (Soweit ich weiß ist es schwierig, dieses auf mobile Screens zu deaktivieren?, korrigiert mich, falls ich da falsch liege).
Habt ihr andere Ansätze wie man das ganze lösen kann?
1 Antwort
Das wäre meine Aktuelle Idee... Aber bin mir nicht ganz sicher ob du sowas gemeint hast
https://jsfiddle.net/1nt2bdom/3/
bzw. hier als abwandlung mit backdrop-filter