L'utilisation de menus dynamiques ou déroulants permet la création de menus structurés, clairs mais aussi d'économiser de l'espace sur les pages. Votre site Web apparaîtra moins encombré, les chemins des menus seront plus faciles à reconnaître et l'interactivité amusante à utiliser. Les menus dynamiques des sites Web agissent comme ceux des logiciels que nous connaissons déjà.
Sans avoir à déplacer le pointeur de la souris sur le menu initial, celui-ci affiche déjà les éléments principaux habituels tels que “Produits”, “Support”, “Contacts”, etc. Lorsqu'un visiteur du site survole un des éléments principaux du menu avec le pointeur de sa souris, cela déclenche l'affichage vers le bas d'un sous-menu, comme une nouvelle fenêtre affichant de nouveaux éléments qui peuvent eux-mêmes contenir un sous-menu contenant de nouveaux éléments. Dès que le pointeur se déplace hors de la liste des sous-menus, ceux-ci disparaissent. Les menus dynamiques peuvent donc avoir plusieurs niveaux.
En mode “Pages”, suivez le chemin de la barre de menus : “Edition” → “Menu dynamique” → “Modifier le menu dynamique”. Cocher la case “Créer un nouveau menu” et entrez un nom pour le nouveau menu dans le champ “Nom du nouveau menu”. Cliquez sur “OK” et une fenêtre intitulée “Menu dynamique” s'ouvre. Ici vous pouvez commencer à créer et modifier des éléments supplémentaires et d'autres paramètres.
Il est également possible de créer une copie d'un menu déjà existant. Ceci est utile si vous avez déjà construit une certaine structure de menu que vous aimez, sa police, sa couleur, etc., et souhaitez l'utiliser à nouveau avec des textes différents. Vous pouvez sélectionner le nom du menu existant dans la liste de la fenêtre “Modifier le menu dynamique”. Veillez à cocher la case de l'option “Créer une copie du menu sélectionné”.
Ces menus dynamiques ne sont pas liés à un projet spécifique. Si, par exemple, vous gérez différentes sections d'un site Web de différents projets, vous pouvez appliquer facilement les menus dynamiques individuels encore et encore.
Ouvrez la fenêtre “Modifier le menu dynamique” et sélectionnez le menu que vous souhaitez supprimer, puis cliquez sur le bouton X rouge “Supprimer le menu dynamique”. Une invite vous demandera de confirmer votre action. Ceci affectera toutes les pages qui utilisent ce menu.
Après l'ouverture de la fenêtre “Modifier le menu dynamique”, vous pouvez visualiser la structure et les entrées d'un menu existant dans une liste. Vous pouvez ajouter de nouvelles entrées, les déplacer ou les supprimer. D'autres options sont disponibles en cliquant avec le bouton droit de la souris sur chacune des lignes de chaque menu respectif.
Sous le panneau de structure du menu, vous pouvez définir un lien pour chacune des lignes du menu. Sélectionnez une ligne du menu et cochez un des boutons de type de lien dans la moitié inférieure de la fenêtre. “Lien vers la page” ouvre une fenêtre “Parcourir les pages” à partir de laquelle vous pouvez sélectionner une page cible. “Lien vers l'URL” ouvre le champ de saisie situé en dessous pour vous permettre de taper dans une adresse URL.
L'option “Ouvrir une nouvelle fenêtre du navigateur” ouvre la page cible dans une nouvelle fenêtre séparée tout en laissant la page Web source ouverte et inchangée dans sa propre fenêtre. Ceci est utile lorsque vous ne souhaitez pas que le visiteur du site ait à naviguer en dehors de la page active. Les utilisations possibles peuvent être des informations sur les droits d'auteur, un texte explicatif ou une vue détaillée de quelque chose. Le visiteur peut facilement fermer cette fenêtre après l'avoir consultée et continuer à consulter la page Web source en attente dans sa propre fenêtre.
A droite de l'onglet “Structure et entrées du menu”, vous trouverez l'onglet “Paramètres”. Ici, vous pouvez définir l'apparence du menu.
Fond offre deux choix, l'un pour la couleur du menu dans son état inactif, l'autre pour la couleur du menu dans son état actif (mode focus), c'est-à-dire la couleur dans laquelle il s'affiche lorsque le pointeur de la souris survole l'élément de menu.
Bordure permet le paramétrage de la couleur des bordures et de la taille de la bordure intérieure et extérieure et optionnellement d'ajouter un effet d'ombre dont l'intensité, et la couleur, sont paramétrables.
Police permet de choisir le type de police de caractères utilisé pour les textes des éléments du menu. Ils permettent également de définir les marges horizontales et verticales afin de choisir la distance des textes par rapport aux bordures, ainsi que couleur du texte en mode inactif et en mode focus.
Cliquer sur “OK” enregistre vos paramètres. Lorsque vous travaillez sur plusieurs menus, utilisez le bouton “Parcourir” pour naviguer entre les différents menus. Les menus modifiés seront automatiquement publiés la prochaine fois que vous publiez la page.
En mode “Pages”, les menus dynamiques peuvent être associés à des objets image ou texte graphique. Lorsqu'un visiteur de votre site déplace le pointeur de la souris au-dessus de l'objet concerné, le menu s'affiche. Le déplacement du pointeur de la souris en dehors de l'objet fait disparaître le menu.
Pour associer un menu dynamique à un objet image ou texte graphique, sélectionnez-le, puis allez dans de menu “Edition” → “Menu Dynamique” → “Appliquer le menu dynamique”. Dans la fenêtre “Appliquer le menu dynamique”, vous pouvez sélectionner le menu qui doit être associé à l'objet dans la liste déroulante “Menu dynamique appliqué”. Utilisez le bouton “Modifier le menu” pour ouvrir la fenêtre “Menu dynamique” et définir ou modifier des paramètres. Le menu dynamique apparaît justifié à gauche sous l'objet associé. Vous pouvez modifier la distance du menu par rapport à l'objet pour le faire apparaître à une position différente, à l'aide des commandes de la zone “Déplacement par rapport à l'objet”.
Vous pouvez supprimer un menu associé à un objet en glissant / déposant simplement le bouton “Copier” dans la Corbeille.