Lorsque l’espace à disposition n’est pas suffisant pour permettre l'affichage de tous les champs, le Menu est automatiquement remplacé par le Bouton Hamburger, et ce également lorsque la création d’un Site Adaptatif (dans Définitions et Conception Adaptative).
|
Si l’Objet Menu a été inséré dans l’éditeur du Modèle, l'espace disponible dépend des dimensions avec lesquelles l’Objet a été dessiné. Si, en revanche, l’Objet Menu a été inséré à l’intérieur d’une Page, l'espace disponible est déterminé par les dimensions de la Cellule de la Grille de mise en page qui le contient. |
Le Bouton Hamburger est carré et a la même hauteur et le même style que les boutons du Menu Principal (section Principal).
En cliquant sur le Bouton Hamburger, le Menu Hamburger s’affiche, c’est-à-dire un menu déroulant qui montre les champs de premier niveau.
Pour définir le style du Menu Hamburger, vous pouvez tout d’abord utiliser les options disponibles dans le cadre Affichage :
| ▪ | Ouverture : spécifie si, lorsque l’on clique sur le Bouton Hamburger, le Menu doit s’ouvrir à Droite ou à Gauche. |
| ▪ | Effet : définit l’effet avec lequel doit s’afficher le Menu Hamburger. |
Étant donné que le Menu Hamburger s’affiche par-dessus la Page, vous pouvez définir certaines options pour la Style Superposition Contenus :
| ▪ | Couleur de l’arrière-plan : définit la couleur de l’arrière-plan extérieur au Menu Hamburger, c'est-à-dire la couleur qui est rendue semi-transparente (en fonction de la valeur configurée pour l’option Opacité ) et utilisée pour créer un filtre qui obscurcit la Page en dessous. |
| ▪ | Opacité : configure le niveau d’opacité de la couleur de l’arrière-plan extérieur au Menu Hamburger. Pour des valeurs proches de 0, l'opacité diminue et le filtre devient plus transparent, laissant voir les contenus de la Page. |
Les options pour définir le Style bouton sont :
| ▪ | Largeur : permet de définir la valeur en pixels de la largeur des boutons contenant les éléments du menu. |
| ▪ | Marge : permet de définir la valeur en pixels de la marge horizontale et verticale, qui est l'espace entre la bordure du bouton et le texte qu'il contient. |
| ▪ | Distance : configure la valeur en pixels de la marge extérieure, c’est-à-dire de l’espace entre deux Boutons. |
|
La largeur des Boutons doit être définie également en fonction de l’espace total disponible pour le Menu : vous pouvez modifier ce paramètre en toute liberté si vous n'utilisez pas un Modèle graphique prédéfini (voir Structure du Modèle). |
Les options présentes dans le cadre Texte Bouton sont :
| ▪ | Police : spécifie le type de Police, le Style et la taille du texte. |
| ▪ | Alignement : permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport au bouton. |
Vous pouvez ensuite définir l'aspect de chaque élément qui compose le Menu Hamburger. Tout d’abord, vous devez sélectionner l'Élément de menu sur lequel vous souhaitez intervenir : Arrière-plan, Élément de menu, Élément sur mouseover, Séparateur et Séparateur de lignes.
Selon l’élément sélectionné, dans la section Style, les options suivantes peuvent être disponibles :
| ▪ | Couleur de l’arrière-plan / Couleur de texte : définissent la couleur de l’Arrière-plan, des textes des Champs des différents statuts, du Séparateur du Menu et de l’élément Séparateur de lignes. |
| ▪ | Bordure : définit, même séparément, la couleur, l’épaisseur et l'ombre des bords de l’Arrière-plan. |
| ▪ | Texte Bouton : applique à la Élément sur mouseover ou au Séparateur le style du texte Normal, Gras, Italiqueou Souligné. Ce style s’ajoute à ce qui a été défini dans le cadre Texte Bouton. |
| ▪ | Largeur : disponible uniquement pour l’élément Séparateur de lignes, elle configure la largeur en pourcentage par rapport à la largeur du Menu Hamburger. |
