Le burger

Le burger est l'élément composé de trois barres horizontales qui permet d'ouvrir le menu lorsqu'il est en version mobile. Le burger est appelé ainsi car sa disposition fait penser à un sandwich.

Dans ce cours, nous n'allons pas parler du burger créé avec le menu WordPress, car il est abordé dans le guide dédié aux templates et au main, section Navbar. Nous allons ici nous concentrer sur l'élément Burger Trigger, qui provient d'OxyExtras.

En cas de besoin, vous pouvez consultez la documentation du site officiel

Insérer un burger trigger

• Sélectionnez le conteneur parent, puis insérez l'élément burger trigger
  • Onglet Extras en utilisant le + violet

Si l'élément Burger Trigger n'est pas visible dans l'onglet Extras, il faudra l'activer sur OxyExtras.

Editer le burger trigger

NB : Il n'est pas possible de modifier l'icône utilisé pour le burger avec cet élément.

Options principales

• Burger Scale : Taille du burger

• Burger Line Height : Epaisseur des lignes du burger.

• State on Page Load : Si Open est coché, le burger apparaitra déjà activé lors de l'arrivée de l'utilisateur sur la page.
  • Utile si vous souhaitez par exemple que le menu mobile soit déjà ouvert lors de l'ouverture de la page.

• Touch Event : Utilisé pour définir comment doit se comporter le burger en lorsque l'utilisateur interagit avec son doigt.
  • TouchStart : dès que l'utilisateur touche le burger
  • TouchEnd : Lorsque l'utilisateur enlève son doigt après avoir touché le burger
  • Click : imite le clic d'une souris. Le burger ne s'activera que si on tapote dessus, et pas si on laisse le doigt appuyé

• Use Preset : Utilse seulement si vous souhaitez réutiliser votre burger sur une autre page ou un autre site.
  • Dans Save New Preset, entrez le nom de votre burger et cliquez sur Save
  • Cliquez sur le bouton Export pour faire apparaître une ligne de code. Copiez-là en cliquant sur le bouton Copy To Clipboard
  • Sur la page où vous souhaitez intégrez vos réglages, insérez un burger, et cliquez sur Import, puis collez le code précédent.

Couleurs

• Line Color : Couleur des lignes du Burger
• Hover Line Color : Couleur des lignes du Burger lorsqu'on passe la souris dessus
• Active Line Color : Couleur des lignes du Burger lorsqu'il est activé

Animation settings

Options d'animation pour passer du statut fermé (avec 3 lignes horizontales) au statut ouvert (avec une croix)

• Burger Animations : Active ou désactive les animations
• Animation : Liste des animations disponibles
  • N'hésitez pas à tester pour trouver celle qui vous convient le mieux
  • L'animation par défaut est Slider

• Transition Duration : Définit le temps que prendra la transition en millisecondes
  • 1000 ms = 1seconde

Button Styles

Styles principaux

• Padding : Ajoute de l'espace à l'intérieur du Burger
  • A ne pas confondre avec la Margin, qui ajoute de l'espace autour du burger. Pour en savoir plus, consultez le guide dédié au size & spacing

• Couleur d'arrière-plan : Ajoute une couleur de fond au burger.

• Hover Background Color : Ajoute une couleur de fond au burger lorsqu'on passe la souris dessus

• Active Background Color : Ajoute une couleur de fond au burger lorsqu'il est activé

• Hover Opacity : Modifie l'opacité du Burger lorsqu'on passe la souris dessus
  • 0 = Burger compltément visible
  • 1 = Burger complétement invisible

Borders

Permet d'ajouter des bordures au burger. Fonctionne de la même manière que l'onglet Borders

Shadows

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

Hover Shadows

Fonctionne sur le même principe que l'onglet shadows, mais s'active au moment où l'utilisateur passe la souris sur le burger.

Hover Borders

Fonctionne sur le même principe que l'onglet borders, mais s'active au moment où l'utilisateur passe la souris sur le burger.

Focus Borders

Fonctionne sur le même principe que l'onglet borders, mais s'active uniquement quand l'utilisateur est en train de cliquer sur le burger

Active Shadows

Fonctionne sur le même principe que l'onglet Shadows, mais s'active lorsque l'utilisateur a activé le burger

Active Borders

Fonctionne sur le même principe que l'onglet Borders, mais s'active lorsque l'utilisateur a activé le burger

Button text

• Button text : Ajoute un texte à côté du burger

• Aria label : Utile pour améliorer l'accessibilité du site. Ajoute un texte de description invisible pour les lecteur d'écran

• Burger Box Margin Right : ajoute une margin à droite du burger

• Text-color : Couleur du texte

• Hover text color : Couleur du texte lorsqu'on passe la souris dessus

• Active text color : Couleur du texte lorsque le burger est activé.