Ajout et modification du style des widgets de menu dans Adobe Muse

Avec votre gabarit ouvert pour modification en vue Conception, ouvrez la bibliothèque de widgets. Si la bibliothèque n’est pas déjà ouverte, choisissez Fenêtre > Bibliothèque de widgets.

Dans le panneau de la bibliothèque de widgets, cliquez sur Menus pour développer la liste des widgets dans le menu. En fonction de la conception de votre site et de l’emplacement que vous souhaitez pour le menu, sélectionnez l’une des options suivantes :

• Horizontal pour ajouter un menu horizontal.
• Vertical pour ajouter un menu vertical.

Utilisez l’outil Sélection pour faire glisser le widget et le placer à l’endroit souhaité dans votre mise en page. Par exemple, vous pouvez placer un widget de menu horizontal dans la section d’en-tête.

Notez que le menu affiche automatiquement les noms des pages que vous avez créées, dans le même ordre qu’ils apparaissent dans la carte du site. Les libellés des menus sont automatiquement liés aux pages de manière dynamique. Cela signifie que, si vous décidez de renommer ou de déplacer les pages, le menu est automatiquement mis à jour. Les liens continuent à fonctionner comme prévu.

Cliquez sur le sélecteur de couleurs dans le panneau de configuration et définissez la couleur du menu. Utilisez ensuite le champ Taille de texte pour définir la taille du texte dans le menu.

Sélectionnez le widget de menu, puis cliquez sur la flèche bleue dans le coin supérieur droit du widget. Le système affiche le panneau Options.

Configurez le widget de menu à l’aide du panneau Options. Vous pouvez configurer les options suivantes :

• Type de menu : indique quelles pages doivent être incluses dans la navigation du site. Sélectionnez Pages de niveau supérieur pour inclure uniquement les pages de premier niveau ou les pages parent. Sélectionnez Toutes les pages pour inclure également les sous-pages dans la navigation. Les pages enfant apparaissent comme des sous-menus. Sélectionnez Manuel pour choisir manuellement les pages à afficher dans le widget de menu.
• Direction : indiquez si vous souhaitez ajouter le menu horizontalement ou verticalement. 
• Modifier ensemble : cochez cette case si vous souhaitez mettre à jour tous les éléments de menu ensemble. Par défaut, cette case est cochée. Si vous ne cochez pas cette case, les configurations que vous choisissez sont appliquées uniquement à l’élément de menu sélectionné.
• Taille de l’élément : indiquez si les éléments de menu doivent être répartis de manière uniforme en largeur ou par taille.
• Afficher l’icône à gauche : par défaut, cette case n’est pas cochée. Sélectionnez cette option si vous souhaitez ajouter une icône dans le coin supérieur gauche de chaque élément de menu.
• Afficher le libellé : par défaut, cette case est cochée. Lorsque vous décochez cette case, les libellés de menus ne sont plus affichés.
• Afficher l’icône à droite : sélectionnez Désactivé si vous souhaitez désactiver les icônes à droite. Sélectionnez Activé si vous souhaitez configurer les icônes dans le coin supérieur droit des éléments de menu. L’option Icône de droite est utile lorsque vous souhaitez ajouter des flèches pour indiquer qu’un élément de menu comporte des sous-menus. Vous pouvez également choisir l’option Sous-menus seulement pour configurer une icône à droite uniquement pour les éléments de menu qui comportent des sous-menus.
• Positionnement : indique le point de départ des parties internes de chaque onglet.

Double-cliquez sur le libellé de menu à modifier pour le sélectionner.

Pour modifier le texte inclus dans un élément de menu, ouvrez le panneau Texte (Fenêtre > Texte). Une fois le libellé sélectionné, vous pouvez utiliser le panneau Texte pour mettre en forme le texte en sélectionnant les options souhaitées :

• Police : sélectionnez la police que vous souhaitez appliquer au libellé de menu.
• Style de la police : sélectionnez Italique ou Gras, si nécessaire, pour le libellé de menu.
• Taille : sélectionnez la taille de la police pour le libellé de menu.
• Couleur : dans le champ déroulant Couleur, entrez le code hexadécimal de la couleur que vous souhaitez appliquer ou sélectionnez la couleur de votre choix à l’aide de la pipette.
  

Utilisez le panneau Texte pour configurer les valeurs de marge pour votre libellé de menu. Si vous disposez déjà d’un style d’hyperlien que vous voulez appliquer au libellé de menu, sélectionnez-le dans le champ déroulant en regard de abc.

Pour appliquer un style de paragraphe, sélectionnez-le dans le champ déroulant Style de paragraphe, dans le panneau Texte.

Pour appliquer un fond et un contour aux libellés de menus, double-cliquez sur le libellé de menu pour le sélectionner. Dans la barre d’outils en haut de la page, sélectionnez la couleur de fond et la couleur de contour. 

Vous pouvez également modifier l’épaisseur du contour et activer un rayon d’arrondi pour les libellés de menus à partir de la barre d’outils.

A l’aide de l’outil Sélection, sélectionnez le libellé de menu pour lequel vous souhaitez créer un état de survol. Ouvrez le panneau Etats. Notez que les états par défaut du bouton sont déjà définis. Cliquez sur la vignette de survol dans le panneau Etats pour modifier cet état.

Avec le libellé de menu toujours sélectionné, utilisez le sélecteur de couleurs de remplissage et choisissez sans couleur de fond (transparent) en cliquant sur l’échantillon de couleur blanc barré d’un trait diagonal rouge.

Cliquez sur l’outil Texte, puis utilisez le sélecteur de couleurs dans le panneau de configuration et choisissez-y une couleur blanc cassé pour l’état de survol.

Dans le panneau Etats, sélectionnez l’état Clic. Avec l’outil Texte sélectionné, définissez le texte de l’état Clic sur une couleur plus foncée en sélectionnant l’échantillon de couleur dans le sélecteur de couleurs du panneau de configuration.

Dans le panneau Etats, sélectionnez l’état Actif. Cliquez sur le lien de remplissage dans le panneau de configuration pour ouvrir le menu Fond.

Dans le menu Fond, cliquez sur le sélecteur de couleurs et définissez la couleur de fond sur Aucune. Cliquez sur l’icône de dossier en regard de la section Image. Dans la boîte de dialogue Importer qui s’affiche, recherchez et sélectionnez le fichier d’image d’arrière-plan, nommé top-nav-over.png. Cliquez sur Sélectionner pour le choisir. La boîte de dialogue d’importation se ferme automatiquement.

Toujours dans le menu Fond, vérifiez que l’option d’ajustement est définie sur Taille originale. Ensuite, dans la zone Position, cliquez au centre des neuf points. Ceci provoque le remplissage par l’image d’arrière-plan en position centrale et sans couleur de fond, à la taille originale. Cliquez n’importe où pour fermer le menu Fond.

Etant donné que l’option par défaut Modifier ensemble est activée dans le widget de menu horizontal, toutes les modifications effectuées sur le libellé de menu sont automatiquement appliquées à l’ensemble des boutons de la barre de navigation.

Choisissez Fichier > Enregistrer pour enregistrer votre travail. Cliquez sur la croix (X) dans l’onglet Gabarit A pour fermer la page dans la vue Conception et revenir à la vue Plan. Notez que toutes les vignettes de la page sont mises à jour pour inclure le contenu qui a été ajouté au gabarit.

En supposant que vous avez déjà créé le plan de votre site, rendez-vous dans la vue Plan dans Adobe Muse. Pour cette procédure, supposons que votre plan du site inclut les pages Accueil, Portfolio, Mon histoire, Contact et Produits.

Si vous accédez au gabarit de page et faites glisser un widget de menu, vous voyez que toutes les pages sont incluses dans le menu.

Pour exclure une page donnée, dans la vue Plan, cliquez avec le bouton droit de la souris sur la page à exclure. Cliquez sur Options de menu > Exclure les pages des menus.

Par exemple, si vous voulez exclure la page Produits, cliquez avec le bouton droit sur Produits. Sélectionnez ensuite Options de menu > Exclure les pages des menus.

Maintenant, lorsque vous retournez au gabarit de page pour afficher votre menu, vous pouvez voir que la page Produits a été supprimée du widget de menu.

Si vous souhaitez qu’un élément de menu apparaisse sans lien, cliquez avec le bouton droit de la souris sur la page concernée dans la vue Plan. Sélectionnez Options de menu > Inclure la page sans hyperlien.

Cette option est adaptée à différents cas lors de la création d’un site web. Par exemple, si vous disposez d’une page de survol Produits où vous voulez que les visiteurs cliquent uniquement sur les catégories de produits et non sur le libellé principal Produits, vous pouvez utiliser cette option.