fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nav-Labels an die Seitentitel angeglichen, Dropdown-Breite nachgerechnet

Browse Source 
Im Menü stand „Eltern-Kind-Turnen", die Seite heißt „Eltern-Kind- &
Kinderturnen" — das Kinderturnen fehlte also im Menü, obwohl Eltern genau
danach suchen. Beim Prüfen fielen zwei weitere Abweichungen auf, alle drei
sind jetzt gleich:

  Eltern-Kind-Turnen  → Eltern-Kind- & Kinderturnen
  Fitness und Pilates → Fitness & Pilates
  Trampolin           → Trampolinturnen

Punkte („…") braucht es dafür nicht: das Dropdown hat min-width und
white-space: nowrap, das Panel wächst also mit dem längsten Punkt statt zu
beschneiden. Ein abgeschnittener Menüpunkt wäre auch die schlechtere Lösung,
weil man dann nicht mehr liest, wohin der Link führt.

Es war aber knapper als es aussah. Gemessen mit dem längsten Punkt (187,6px):
ruhend 190,0px Platz, im Hover UND auf der aktiven Seite nur 186,0px, weil
padding-left dort von --space-s (16px) auf --space-m (20px) wächst. Das Panel
wäre beim Rübergehen um zwei Pixel gewachsen und auf dieser Seite dauerhaft
breiter gewesen — sichtbar als Flackern, weil es mittig sitzt und sich nach
beiden Seiten schiebt.

Behoben mit einem Wert: min-width 15rem → 15,5rem. Alle drei Panels bleiben
jetzt in jedem Zustand bei 248px, mit 8,4px Luft statt 1,6px Fehlbetrag. Auch
bei 1250px Viewport (der schmalsten Breite mit Desktop-Menü) liegt kein Panel
am Rand. Die Rechnung steht als Kommentar über der Regel, damit der nächste
längere Menüpunkt nachgemessen wird.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
Felix Schneider
2026-07-31 22:31:58 +02:00
parent 592acf02b0
commit f21224ea84
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
data/navigation.json
View File

@@ -20,9 +20,9 @@
"children": [
{ "label": "Übersicht", "slug": "turnen" },
{ "label": "Erwachsenenturnen", "slug": "turnen/erwachsenenturnen" },
{ "label": "Eltern-Kind-Turnen", "slug": "turnen/eltern-kind-turnen" },
{ "label": "Fitness und Pilates", "slug": "turnen/fitness-pilates" },
{ "label": "Trampolin", "slug": "turnen/trampolin" },
{ "label": "Eltern-Kind- & Kinderturnen", "slug": "turnen/eltern-kind-turnen" },
{ "label": "Fitness & Pilates", "slug": "turnen/fitness-pilates" },
{ "label": "Trampolinturnen", "slug": "turnen/trampolin" },
{ "label": "Wettkampfturnen", "slug": "turnen/wettkampfturnen" }
]
},

8
public/assets/css/layout.css
View File

@@ -176,7 +176,13 @@
z-index: 25;
display: grid;
gap: var(--space-3xs);
min-width: 15rem;
/* 15,5rem statt 15rem: der längste Punkt „Eltern-Kind- & Kinderturnen" ist 187,6px
breit, und im Hover bzw. auf der aktiven Seite wächst padding-left von --space-s
auf --space-m. Bei 15rem blieben dafür nur 186px, das Panel wuchs beim Hover um
zwei Pixel und war auf dieser Seite dauerhaft breiter — als Flackern sichtbar,
weil das Panel mittig sitzt und sich also nach beiden Seiten schiebt. Wer hier
einen längeren Menüpunkt einträgt, misst die Textbreite im Hover-Zustand nach. */
min-width: 15.5rem;
margin: 0;
/* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
padding: var(--space-2xs);