Adaptive Navigation
Une seule navigation, trois formes selon la largeur de son conteneur : bouton menu qui ouvre la liste, liens en ligne dès 320 px, barre latérale dès 480 px.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0757-root est le conteneur interrogé (container: anv-nav / inline-size). Elle contient .anv-shell, avec la navigation <nav class="anv-nav"> (la marque .anv-logo, le bouton .anv-burger et une seule liste <ul class="anv-links">) puis la zone .anv-content, où vous mettez le contenu de la page. Les liens n'existent qu'une fois dans le HTML : seule leur mise en page change.
Sous 320 px, la barre montre la marque et un bouton à trois traits ; la liste est cachée. Le bouton ajoute la classe is-open sur la navigation et passe aria-expanded à true : la liste s'ouvre en colonne sous la barre et pousse le contenu, les traits deviennent une croix. Échap la referme (et rend le focus au bouton s'il était dans le menu), de même qu'un clic en dehors, un clic sur un lien ou une tabulation qui sort du menu.
Dès 320 px, @container anv-nav (min-width: 320px) cache le bouton et aligne les liens à droite de la marque. Dès 480 px, la coque passe en grille 160px 1fr : la navigation devient une barre latérale verticale (marque en tête, liens empilés) et le contenu se centre à sa droite. Le script se branche une fois par racine, sans identifiant ; le lien cliqué reçoit aria-current="page".
Accessibilité
- Vrai bouton de menu :
<button type="button">nommé « Menu », avecaria-expanded; la liste suit le bouton dans l'ordre de lecture, donc Tab va droit au premier lien une fois le menu ouvert. - Fermeture au clavier : Échap ferme le menu et remet le focus sur le bouton ; quitter le dernier lien par Tab le ferme aussi, sans piéger le focus.
- Vrais liens :
<a href>dans une liste<ul>d'un<nav aria-label>; le lien actif portearia-current="page". Sur Safari, Tab ne s'arrête sur les liens qu'avec Option+Tab ou le réglage clavier de macOS. - Focus visible : contour de 2 px
#a78bfasur la marque, le bouton et les liens. Cible du bouton : 32 × 32 px. - Mouvement réduit : le menu s'ouvre sans animation dans tous les cas ; sous
prefers-reduced-motion: reduce, le fondu de survol des liens est retiré aussi.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16), Element.closest(), :focus-visible (Safari 15.4). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5, deux copies dans la même page : bouton visible jusqu'à 319 px, liens en ligne de 321 à 479 px, barre latérale dès 481 px ; à 280 px, le bouton de la 2e copie n'ouvre que la 2e (4 liens visibles et cliquables) au clic, au toucher et à Entrée ; Échap, clic dehors et sortie du focus referment ; 0 erreur.
Sans requêtes de conteneur, la navigation reste dans sa forme étroite (bouton + liste repliable) à toutes les largeurs, toujours utilisable. Sans JavaScript, le bouton n'ouvre rien sous 320 px : gardez le script, ou doublez les liens dans le pied de page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0757-root">
<div class="anv-shell">
<nav class="anv-nav" aria-label="…">
<div class="anv-head">
<a class="anv-logo" href="#">…</a>
<button type="button" class="anv-burger" aria-expanded="false" aria-label="Menu">…</button>
</div>
<ul class="anv-links">
<li><a href="#…" aria-current="page">…</a></li>
<li><a href="#…">…</a></li>
</ul>
</nav>
<div class="anv-content">…</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Paliers (CSS — @container anv-nav (min-width: 320px) et (min-width: 480px)) |
320 px liens en ligne, 480 px barre latérale | Ajustez-les à la longueur de vos libellés : avec six liens, montez le premier palier vers 420 px. |
Largeur de la barre latérale (CSS — grid-template-columns: 160px 1fr) |
160 px | Élargissez pour des intitulés longs. |
Liens (HTML — .anv-links) |
Accueil, À propos, Blog, Contact | Un <li><a> par lien ; aria-current="page" sur la page en cours. |
Marque (HTML — .anv-logo) |
Texte « Marque », couleur #986ef7 |
Remplacez par votre nom ou un <img alt> de logo. |
Contenu (HTML — .anv-content) |
« Contenu de la page » | Mettez-y votre page ; en mode barre latérale, il est centré : passez-le en display: block pour un texte courant. |
| Couleurs (CSS) | Coque rgba(255,255,255,.05), liens rgba(255,255,255,.7), lien actif #c4b5fd |
Pour un fond clair, changez aussi les traits du bouton (.anv-burger span). |
FAQ
overflow: hidden. Pour un menu par-dessus, mettez .anv-links en position: absolute dans votre CSS.
