Sidebar Toggle
Barre latérale à icônes avec un bouton chevron : dépliée, elle passe de 80 à 160 px, nomme ses liens, et le contenu voisin se réorganise.
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-0752-root contient une rangée .csb-scene : à gauche le <nav class="csb-panel"> (bouton .csb-toggle puis un lien .csb-item par entrée), à droite la zone .csb-main. Le bouton ajoute ou retire la classe is-expanded sur la barre et met à jour son aria-expanded ; la largeur passe de 80 à 160 px en 0,4 s et le chevron pivote d'un demi-tour.
La barre est elle-même un conteneur (container: csb-panel / inline-size). Repliée, sa largeur utile est de 67 px : les libellés .csb-text sont cachés à l'œil mais restent lus, et les icônes sont centrées. Dès 100 px utiles (donc une fois dépliée), @container csb-panel (min-width: 100px) affiche les libellés et aligne les liens à gauche. C'est la largeur de la barre qui décide, pas l'état du bouton : si vous forcez une largeur de 120 px en CSS, les libellés s'affichent aussi.
La zone principale est un second conteneur (csb-main) : ses blocs .csb-block (un chiffre .csb-num et sa légende .csb-cap) sont sur une colonne sous 180 px de large et sur deux à partir de 180 px. Quand la barre se déplie, le contenu perd 80 px et se réorganise de lui-même. Le script se branche sur chaque racine, une seule fois, sans identifiant : deux copies dans la même page s'ouvrent séparément.
Accessibilité
- Bouton annoncé : vrai
<button type="button">nommé « Afficher les libellés du menu », avecaria-expandedàfalseoutrue; Entrée et Espace l'activent. - Liens nommés même repliés : les libellés sont cachés à l'œil (boîte de 1 px), pas retirés ; un lecteur d'écran lit « Projets, lien » dans la barre de 80 px. Icônes en
aria-hidden="true". - Page en cours :
aria-current="page"sur le lien actif, déplacé au clic par le script. - Focus visible : contour de 2 px
#a78bfasur le bouton et les liens. Sur Safari, Tab ne s'arrête sur les liens qu'avec Option+Tab ou le réglage clavier de macOS. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la barre change de largeur d'un coup et le chevron se retourne sans rotation ; l'ouverture fonctionne à l'identique.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16) et :focus-visible (Safari 15.4). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5, deux copies dans la même page : le bouton de la 2e copie n'ouvre que la 2e (80 → 160 px, aria-expanded="true", libellés de 36 à 49 px visibles), clavier et toucher compris ; blocs sur 2 colonnes dès 180 px de contenu ; 0 erreur.
Sans requêtes de conteneur, le bouton élargit toujours la barre mais les libellés restent cachés à l'œil (ils sont lus par les lecteurs d'écran) et les blocs restent sur une colonne. Sans JavaScript, la barre reste repliée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0752-root">
<div class="csb-scene">
<nav class="csb-panel" aria-label="…">
<button type="button" class="csb-toggle" aria-expanded="false" aria-label="…">…</button>
<a class="csb-item" href="#…" aria-current="page">
<svg aria-hidden="true">…</svg>
<span class="csb-text">…</span>
</a>
</nav>
<div class="csb-main">
<p class="csb-title">…</p>
<div class="csb-blocks">
<div class="csb-block"><span class="csb-num">…</span><span class="csb-cap">…</span></div>
</div>
</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 |
|---|---|---|
Largeurs (CSS — .csb-panel et .csb-panel.is-expanded) |
80 px repliée, 160 px dépliée | Gardez la largeur repliée sous le palier des libellés et la largeur dépliée au-dessus. |
Palier des libellés (CSS — @container csb-panel (min-width: 100px)) |
100 px de largeur utile | À relever si vous élargissez la barre repliée (sinon les libellés s'afficheraient dès le départ). |
Palier du contenu (CSS — @container csb-main (min-width: 180px)) |
Blocs sur 1 colonne, puis 2 dès 180 px | Ajoutez d'autres paliers sur csb-main pour votre propre contenu (tableau, cartes). |
État au chargement (HTML — classe is-expanded sur .csb-panel) |
Repliée | Ajoutez la classe pour démarrer dépliée ; le script aligne aria-expanded au chargement. |
Entrées (HTML — .csb-item) |
Accueil, Projets, Réglages | Un lien par entrée avec son icône SVG et son .csb-text ; aria-current="page" sur la page en cours. |
| Couleurs (CSS) | Bouton rgba(139,92,246,.2) et chevron #8b5cf6, lien actif rgba(139,92,246,.2) |
Remplacez-les sur .csb-toggle, .csb-toggle svg et .csb-item[aria-current]. |
Durée (CSS — transition: width .4s sur .csb-panel) |
0,4 s ; chevron 0,3 s | Raccourcissez ou retirez la transition ; le mouvement réduit la supprime déjà. |
FAQ
@container qui affiche les libellés quand la barre dépasse 100 px utiles. Une barre élargie autrement (CSS, autre script) les montre aussi.localStorage) et posez la classe is-expanded sur .csb-panel au chargement : le script synchronise alors aria-expanded.
