Offcanvas est un plugin bootstrap 5 pour un menu de barre latérale qui apparaît à l'écran de gauche, de droite ou de bas selon les besoins des utilisateurs. OffCanvas peut également être utilisé comme menu secondaire ou le menu principal et il peut être déclenché par un bouton ou un lien. Lorsque la barre latérale hors canneaux est déclenchée, elle bloque la page de tout type d'interaction car lorsque le menu se révèle, la page se cache derrière elle.

Cet article fournira un guide détaillé sur:

• Comment créer une barre latérale Offcanvas
• Différentes positions de la barre latérale Offcanvas

Comment créer une barre latérale Offcanvas

Pour créer une barre latérale Offcanvas, ajouter .offcanvas classe dans une étiquette div avec sa position de révélation .démarrer Et un unique identifiant. Ensuite, enveloppez cette div autour d'une div avec la classe .tête-à-tête qui contient le titre de la barre latérale avec son bouton de licenciement et une div avec la classe .body qui contient le contenu de la barre latérale.

Enfin, pour déclencher l'utilisation de la barre latérale Offcanvas data-bs-toggle = ”offCanvas” et data-bs-target = ”# id” Pour connecter la barre latérale avec un bouton ou un lien qui en cliquant révèle la barre latérale OffCanvas:

Code

Menu

Maison
À propos
Produit
Contactez-nous
Paramètres

Barre latérale Offcanvas

Le bouton ci-dessous ouvrira la barre latérale OffCanvas.

Ouvrir

C'est ainsi que vous créez une barre latérale Offcanvas dans Bootstrap 5.

Positions Offcanvas

La barre latérale OffCanvas peut être révélée à partir de n'importe quel bord de l'écran conformément aux exigences de l'utilisateur. Pour spécifier la position Offcanvas, ajoutez simplement .Offcanvas-start / fin / top / inférieur classe avec .offcanvas classe.

Commencer

.démarrer La classe révélera la barre latérale du côté gauche de la page.

Fin

.hors de la fin La classe révélera la barre latérale du côté droit de la page.

Haut

.offcanvas La classe révélera la barre latérale de la partie supérieure de la page.

Bas

.bostombas La classe révélera la barre latérale du côté inférieur de la page.

Conclusion

Offcanvas la barre latérale est créée en ajoutant .offcanvas classe à un div. Puis ajouter .Offcanvas-start / fin / top / inférieur Pour spécifier la position de la barre latérale et identifiant attribut pour donner à la barre latérale un identifiant unique. Ensuite, enveloppez cette div autour d'une div avec la classe .tête-à-tête qui contient le titre de la barre latérale avec son bouton de licenciement et une div avec la classe .body qui contient le contenu de la barre latérale. Maintenant pour déclencher l'utilisation de la barre latérale Offcanvas data-bs-toggle = ”offCanvas” et data-bs-target = ”# id” Pour connecter la barre latérale avec un bouton ou un lien qui, en clic, révèle la barre latérale OffCanvas.