Nav mobile v2 : le dropdown 480px devient un panneau plein écran fixed
Standard KA 2026-08-25 : .mobile-menu passe de position:absolute top:100% (max-height 480px) à position:fixed inset:0 — menu visible peu importe la position de scroll. Rang du header (marque + burger→✕) maintenu au-dessus du panneau, verrou de scroll CSS pur via html:has(.mobile-menu.open). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +13 −9
modified
frontend/src/styles.css
+13 −9
@@ -657,15 +657,20 @@ a.hub-chip:hover { border-color: var(--ink); color: var(--ink); } | ||
| 657 | 657 | .menu-btn.open span:nth-child(2) { opacity: 0; } |
| 658 | 658 | .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 659 | 659 | |
| 660 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu | |
| 661 | + importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ | |
| 660 | 662 | .mobile-menu { |
| 661 | − display: none; position: absolute; left: 0; right: 0; top: 100%; | |
| 662 | − background: var(--paper); border-bottom: 2px solid var(--ink); | |
| 663 | − box-shadow: 0 18px 30px rgba(23, 24, 28, 0.18); | |
| 664 | − padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); | |
| 665 | − max-height: 0; overflow: hidden; opacity: 0; | |
| 666 | − transition: max-height 0.3s ease, opacity 0.22s ease; | |
| 667 | −} | |
| 668 | −.mobile-menu.open { max-height: 480px; opacity: 1; overflow-y: auto; } | |
| 663 | + display: none; position: fixed; inset: 0; | |
| 664 | + background: var(--paper); | |
| 665 | + padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); | |
| 666 | + overflow-y: auto; overscroll-behavior: contain; | |
| 667 | +} | |
| 668 | +.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } | |
| 669 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 670 | +/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 671 | +.header.menu-open .header-inner { position: relative; z-index: 60; } | |
| 672 | +/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ | |
| 673 | +html:has(.mobile-menu.open) { overflow: hidden; } | |
| 669 | 674 | .mm-link { |
| 670 | 675 | display: flex; align-items: center; gap: 12px; |
| 671 | 676 | padding: 15px 10px; min-height: 52px; |
@@ -695,7 +700,6 @@ a.hub-chip:hover { border-color: var(--ink); color: var(--ink); } | ||
| 695 | 700 | @media (max-width: 760px) { |
| 696 | 701 | .menu-btn { display: flex; } |
| 697 | 702 | .nav { display: none; } |
| 698 | − .mobile-menu { display: block; } | |
| 699 | 703 | } |
| 700 | 704 | |
| 701 | 705 | /* Anti-zoom iOS généralisé : ≥16 px sur tous les champs et selects en |
| 702 | 706 | |