Les commandes de la section Principal

Étape 4 - Pages > Objet Menu >

Les commandes de la section Principal

Previous pageReturn to chapter overviewNext page

Les options de la section Général de la fenêtre Style du menu de premier niveau permettent de définir certaines prédispositions générales du menu principal.

Tout d’abord, il convient de spécifier le Niveau qui doit être utilisé pour créer le Menu. Il suffit de rappeler le Plan du Site et de sélectionner le Niveau souhaité : les champs inclus seront utilisés comme champs du menu. Ensuite, les options disponibles dans le cadre Affichage sur lesquelles travailler sont les suivantes :

Alignement menu principal  / Alignement Bouton Hamburger  : définissent respectivement l’alignement du Menu et du Bouton Hamburger à Gauche, au Centre ou à Droite par rapport à l’espace disponible pour l’Objet Menu. 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.

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) n’a pas été activée. Vous pouvez donc utiliser le Bouton Hamburger comme solution alternative au Menu de navigation traditionnel également dans les Sites Bureau.

Bordure : définit, même séparément, l’épaisseur des bords et le facteur d’arrondissement des angles des Boutons.

Les options disponibles dans le cadre Texte 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  : permet de définir la valeur en pixels de la marge extérieure, à savoir l'espace situé entre deux boutons.

Les options disponibles dans le cadre 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).

Bordure  : définit, même séparément, l’épaisseur des bords et le facteur d’arrondissement des angles des Boutons.

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 Principal : 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, Élément sur mouseover, Séparateur.

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, et du Séparateur du Menu.
Opacité  : configure le niveau d’opacité de la couleur appliquée à l’Arrière-plan. Pour des valeurs proches de 0, l'opacité diminue et l'arrière-plan de l’Objet devient plus transparent, laissant voir l'arrière-plan de la Page.
Bordure  : définit, même séparément, la couleur, l’épaisseur et le facteur d’arrondissement des angles pour les bords de l’Arrière-plan. Pour les Champs du Menu dans les différents statuts, vous pouvez en revanche configurer uniquement la couleur du bord : l’épaisseur et le facteur d’arrondissement reprennent ce qui a été défini dans le cadre Style bouton.
Marge  : configure la valeur en pixels des marges horizontale et verticale externes aux Boutons. De fait, la marge configurée détermine les dimensions de l’Arrière-plan du Menu.
Image d'arrière-plan  : permet de définir l'image qui doit être affichée comme arrière-plan du Bouton. Pour sélectionner l'image à utiliser, cliquez sur le bouton pour parcourir les ressources disponibles: vous pouvez utiliser des fichiers au format .JPG, .GIF, .PNG. Autrement, vous pouvez cliquer sur la flèche à côté du champ pour ouvrir la librairie des boutons et choisir une image à utiliser.
Utiliser les mêmes paramètres que l'effet au passage de la souris : disponible uniquement pour l’élément Élément sur mouseover, elle fait en sorte que soient utilisées les mêmes options définies pour la Élément sur mouseover ; dans le cas contraire, les deux statuts peuvent avoir des configurations différentes.
Effet : disponible uniquement pour l’élément Élément sur mouseover, elle définit l'effet avec lequel le Bouton est animé au passage de la souris.
Texte Bouton : elle applique au Champ du Menu sélectionné 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.