Sidebar Collapse
Barre latérale qui suit la place disponible : icônes seules sous 350 px de conteneur, colonne de 140 px avec libellés au-delà, 200 px dès 500 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-0762-root est le conteneur interrogé (container: wsb-side / inline-size). Elle contient une grille .wsb-layout à deux colonnes : la barre <nav class="wsb-panel"> (un lien .wsb-item par entrée, icône SVG et <span class="wsb-label">) et la zone .wsb-main où va votre contenu. Il n'y a ni bouton ni état : c'est uniquement la largeur de la racine qui décide.
Sous 350 px, la grille est en 40px 1fr : la barre ne montre que les icônes, les libellés sont cachés à l'œil mais restent lus. Dès 350 px, la colonne passe à 140 px et les libellés s'affichent ; dès 500 px, elle passe à 200 px, les liens grandissent (0,8 rem, marges de 8 × 10 px). Le passage d'une colonne à l'autre est animé en 0,4 s (grid-template-columns). Un libellé trop long pour sa colonne se termine par des points de suspension au lieu de déborder.
Le petit script déplace aria-current="page" sur le lien cliqué, une seule fois par racine même si le code est collé deux fois. Il est facultatif : sur un site à plusieurs pages, posez l'attribut côté serveur.
Accessibilité
- Liens nommés à toutes les largeurs : en mode icônes, les libellés sont cachés à l'œil (boîte de 1 px), pas retirés : « Recherche, lien » est lu même dans la colonne de 40 px. Icônes en
aria-hidden="true". - Vrais liens :
<a href>dans un<nav aria-label>, page en cours enaria-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
#a78bfatracé à l'intérieur du lien (décalage −2 px) pour rester visible dans la colonne étroite. - En mode icônes, une infobulle n'est pas fournie : si vos icônes sont peu parlantes, ajoutez un
titlesur chaque lien ou gardez la racine au-dessus de 350 px. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la colonne change de largeur d'un coup et les fondus de survol sont retirés.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16) ; l'animation de grid-template-columns demande Chrome 107 ou Safari 16 (avant, le changement est instantané). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : colonne de 40 px jusqu'à 349 px, 140 px de 351 à 499 px avec libellés entiers (« Paramètres » 60 px), 200 px dès 501 px ; deux copies indépendantes au clic, au toucher et à Entrée ; 0 erreur.
Sans requêtes de conteneur, la barre reste en icônes seules (colonne de 40 px) à toutes les largeurs ; les liens restent nommés pour les lecteurs d'écran et fonctionnent.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0762-root">
<div class="wsb-layout">
<nav class="wsb-panel" aria-label="…">
<a class="wsb-item" href="#…" aria-current="page">
<svg aria-hidden="true">…</svg>
<span class="wsb-label">…</span>
</a>
<a class="wsb-item" href="#…">…</a>
</nav>
<div class="wsb-main">…</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 wsb-side (min-width: 350px) et (min-width: 500px)) |
350 px libellés, 500 px colonne large | Placez le premier palier là où votre plus long libellé tient dans la colonne. |
Largeurs de colonne (CSS — grid-template-columns de .wsb-layout) |
40 px, puis 140 px, puis 200 px | Changez les trois valeurs ; la colonne étroite doit rester ≥ 40 px pour les icônes de 16 px. |
Entrées (HTML — .wsb-item) |
Accueil, Recherche, Profil, Paramètres | Un lien par entrée avec son icône et son .wsb-label ; aria-current="page" sur la page en cours. |
Contenu (HTML — .wsb-main) |
« Contenu principal », centré | Mettez-y votre page ; passez-le en display: block pour un contenu en colonne. |
Hauteur minimale (CSS — min-height de .wsb-layout) |
140 px | Donnez height: 100% à la racine et à la grille pour remplir une fenêtre ou un panneau. |
| Couleurs (CSS) | Barre rgba(255,255,255,.05), liens rgba(255,255,255,.6), actif rgba(139,92,246,.2) |
Remplacez-les sur .wsb-panel, .wsb-item et .wsb-item[aria-current]. |
Transition (CSS — transition de .wsb-layout) |
0,4 s, cubic-bezier(.4,0,.2,1) |
Retirez-la pour un changement sec ; le mouvement réduit la retire déjà. |
FAQ
width: 220px) : la barre suit d'elle-même, sans autre réglage.
