Mobile Navigation #9

Closed
opened 2026-08-20 22:38:49 +02:00 by Danmin · 2 comments
Owner

Auf 100% breite erweitern

Auf 100% breite erweitern
Author
Owner

Icons ganz nach unten und darunter noch Impressum und Datenschutz links

Icons ganz nach unten und darunter noch Impressum und Datenschutz links
Author
Owner

Umgesetzt in a7cc389.

Das ausgeklappte Menü nimmt jetzt die volle Breite und Höhe statt min(360px, 85vw). Gemessen: 375 × 812 px auf dem Telefon.

Zwei Dinge waren mitzudenken:

Der Menüknopf lag danach unter dem Panel. Er ist die einzige Schaltfläche zum Schließen — neben der Escape-Taste — also hätte sich das Menü nicht mehr schließen lassen. Er bekommt position: relative und z-index: 1; beide sind im Stapelkontext der Kopfzeile, positioniert schlägt statisch. Nachgeprüft mit elementFromPoint: An der Position des Knopfes liegt er selbst oben.

Der Schleier hinter dem Panel hatte keine Funktion mehr, weil daneben nichts mehr sichtbar ist, das man antippen könnte. Er ist auf display: none statt weiter mitgerendert zu werden.

Eine Einschränkung: Das geöffnete Menü selbst konnte ich nicht prüfen — meine Vorschau übernimmt Klassenänderungen nicht zuverlässig, dieselbe Eigenart, die schon bei Farbwerten und innerWidth auftrat. Ein kurzer Blick aufs Telefon wäre gut.

Umgesetzt in a7cc389. Das ausgeklappte Menü nimmt jetzt die volle Breite und Höhe statt `min(360px, 85vw)`. Gemessen: 375 × 812 px auf dem Telefon. **Zwei Dinge waren mitzudenken:** Der Menüknopf lag danach *unter* dem Panel. Er ist die einzige Schaltfläche zum Schließen — neben der Escape-Taste — also hätte sich das Menü nicht mehr schließen lassen. Er bekommt `position: relative` und `z-index: 1`; beide sind im Stapelkontext der Kopfzeile, positioniert schlägt statisch. Nachgeprüft mit `elementFromPoint`: An der Position des Knopfes liegt er selbst oben. Der Schleier hinter dem Panel hatte keine Funktion mehr, weil daneben nichts mehr sichtbar ist, das man antippen könnte. Er ist auf `display: none` statt weiter mitgerendert zu werden. **Eine Einschränkung:** Das geöffnete Menü selbst konnte ich nicht prüfen — meine Vorschau übernimmt Klassenänderungen nicht zuverlässig, dieselbe Eigenart, die schon bei Farbwerten und `innerWidth` auftrat. Ein kurzer Blick aufs Telefon wäre gut.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
Danmin/gravSchleh#9
No description provided.