Le off-canvas

Le off-canva est un élément permet d'afficher une nouvelle fenêtre lors du clic sur un élément, permettant d'afficher de nouvelles choses.

Il est par exemple possible d'intégrer un menu, mais aussi une grande variétés d'éléments, comme des images, une vidéo, un formulaire de contact ... Le off-canvas est donc particulièrement intéressant pour ajouter de l'interactivité à votre site web, pas seulement en version mobile.

Insérer un off-canvas

• Sélectionnez le conteneur parent qui contiendra l'élément (par défaut le inner content) et insérez l'élément off-canvas
  • Onglet Extras quand vous cliquez sur le + violet
  • Si l'élément Off Canvas n'est pas visible, Activez l'option dans l'extension OxyExtras

Insérer un off-canvas dans une navbar

Le off-canvas est un outil particulièrement indiqué pour créer un menu de navigation mobile, en permettant de créer une version plus stylisée et plus modifiablee. La procédure pour l'intégrer est détaillée dans le guide sur les templates et le main.

Editer le off-canvas

En cas de besoin, vous pouvez consulter la documentation relative au off-canvas.

Options principales

Ce sont les options disponible directement en cliquant sur l'élément

• Couleur d'arrière-plan : La couleur du conteneur
• Click selector : sélecteur qui va activer ou désactiver le off-canvas. Il peut être défini sur n'importe quel élément qui porte la classe que vous assignez
  • Par défaut, le sélecteur est .oxy-burger-trigger, qui est une classe associée à l'élément burger trigger

• Slide in from : Définit par où le Off-canvas va s'ouvrir.
  • Le changement ne se voit pas immédiatement sur la page d'édition. Vous devrez recharger la page après avoir sauvegardé.

• Offcanvas Type : Si Slide est sélectionné, le off-canvas va se positionner par dessus le contenu de la page. Si Push est sélectionné, il poussera le conteneur qui a été choisi.

• Offcanvas Width : définit la largeur du Off-canvas.
  • Si vous souhaitez que le Off-canvas prenne toute la page, mettez une width à 100%.

• Offcanvas Transition Duration : Définit la durée d'ouverture du Off-canvas en secondes.. Plus le chiffre est grand, plus il mettra du temps à s'ouvrir

• Tag : Définit la balise du Off-canvas, par défaut Div. Inutile dans une utilisation normale.

Config

Définit les options de configuration du Off-canvas (NB : Enabled = Activé - Disabled = Désactivé) :

• State on page load : Définit si le Off-canvas est déjà déployé lorsque l'utilisateur arrive sur la page.

• Site scrolling when open : Définit si l'utilisateur peut faire défiler la page lorsque le Off-canvas est ouvert.

• Clicking outside offcanvas closes it : Autorise ou non le Off-canvas a être fermé si l'utilisateur en dehors de l'élément.

• Browser performance : A utiliser si le Off-canvas perturbe le temps de chargement. Améliore la performance de l'élément.

• Force second offcanvas to close : si un autre Off-canvas était ouvert, il sera fermé lors de l'ouverture de celui-ci.

• Clicking hashlinks will close offcanvas : Cliquer sur un Hashlink (un lien amenant à une autre section de la page) fermera le Off-canvas.

• Sync burger triggers : A utiliser si vous souhaitez que deux burgers triggers soient activés pour que le Off-canvas s'ouvre. Dans ce cas, il vérifiera que les deux sont bien activés avant de s'ouvrir.

Layout / Spacing

Fonctionne comme les onglets classiques d'Oxygen. Vous permet de gérer l'alignement et les marges.

• Gap permet d'ajouter un espace général entre tous les élément. Un peu comme le Margin.

Attention, dans le cas d'un menu intégré seul au Off-canvas, les onglets child element layout et gap ne fonctionneront pas, car le menu wordpress est constitué d'un seul bloc.

Box Shadow

Ajoute une ombre au Off-canvas. Pour en savoir plus, consultez le guide dédié à la Box-shadow.

Backdrop

Le Backdrop est une div supplémentaire qui vient se mettre entre la page et le Off-canvas lorsqu'il est ouvert pour empêcher l'utilisateur de cliquer par accident sur un autre élément

• Backdrop display : Active ou désactive le backdrop

• Couleur d'arrière-plan : Change la couleur du Backdrop

• Z-index : Modifie la position du backdrop dans la hiérarchie d'affichage. A ne modifier que si vous avez certains éléments qui ont un Z-index supérieur à 10, et qui passent au-dessus du Backdrop
  • Le Z-index est abordé plus en détail dans le guide sur l'onglet layout

• Fade-Duration : Définit la durée d'apparition du Backdrop en secondes.. Plus le chiffre est grand, plus il mettra du temps à apparaître
  • Généralement, la durée est la même que pour Offcanvas transition duration (Options principales)

Inner animations

A utiliser si vous souhaitez intégrer des animations à l'intérieur du Off-canvas avec l'onglet Animate on scroll

Accessibility

Définit les paramètres d'accessibilité de votre site web.

• Set inert when offcanvas hidden : Empèche un lecteur d'écran de lire le offcanvas s'il est fermé pour ne pas perturber l'utilisateur.

• Auto add aria-controls : Ajoute des outils permettant de contrôler le off-canvas plus facilement avec un lecteur d'écran.

• Aria label : nom du offcanvas pour le lecteur d'écran. En français, mettez quelque chose qui définit le but de votre off-canvas, comme "Contenu du menu mobile"

• ESC key when focus in offcanvas closes it : permet de fermer le Off-canva avec la touche échap pour tous les utilisateurs.

• Move focus when opened : Options avancée, inutile dans une utilisation normale.