Découvrez comment ajouter et configurer les menus de votre site Adobe Muse. Apprenez à créer des menus mobiles et des états de survol, et à modifier des libellés de menus.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

La navigation est l’un des aspects les plus importants à prendre en compte lors de la conception d’un site web. Lors de la création d’un site web, le choix du type et de la position du système de navigation sur le site est crucial. Les menus ou la navigation sur le site peuvent aussi bien améliorer l’expérience de l’utilisateur qu’en diminuer la qualité.

Adobe Muse vous permet de créer rapidement un système de navigation sur le site à l’aide des widgets de menu. Bien que vous puissiez créer des liens pour connecter les pages manuellement, les widgets de menu vous offrent un moyen simple et flexible pour ajouter
la navigation à votre site. Comme les autres widgets, il vous suffit de faire glisser le widget de menu sur votre page pour ajouter un menu. Ce faisant, vous verrez que les libellés des menus, qui sont identiques au nom de la page, sont automatiquement indiqués. Lorsque vous modifiez le nom de la page dans la vue Plan, les libellés des menus sont automatiquement mis à jour. 

Vous pouvez ajouter des menus verticaux et horizontaux. En outre, Adobe Muse vous permet de créer des menus en sandwich et des états de survol pour les éléments de menu. Lisez la suite pour savoir comment effectuer toutes ces actions à l’aide d’Adobe Muse.

 

Ajout d’un widget de menu

  1. 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.

  2. 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.
    Choix du widget de menu vertical ou horizontal dans Adobe Muse
    Choix du widget de menu vertical ou horizontal
  3. 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.

    Positionnez le widget de menu sur l’image d’arrière-plan de ruban marron dans l’en-tête.
    Positionnez le widget de menu sur l’image d’arrière-plan de ruban marron dans l’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.

  4. 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.

    Choix de la taille du texte et de la couleur
    Définir la couleur de la police et la taille en points pour contrôler les boutons de texte dans le widget de menu horizontal.

Configuration et personnalisation des widgets de menu

Maintenant que vous avez ajouté le widget de menu à votre mise en page, vous pouvez personnaliser ce widget en fonction de vos besoins. Vous pouvez configurer les menus à l’aide du panneau Options.  Le panneau Options est un panneau contextuel permettant d’appliquer des modifications afin de mettre à jour les paramètres propres au widget. Utilisez ce panneau pour contrôler le comportement des widgets et la façon dont leur contenu s’affiche.

  1. 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.

    Configuration du widget de menu à partir du panneau Options
    Configuration du widget de menu à partir du panneau Options
  2. 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.
    Configuration des widgets de menu à l’aide du panneau Options
    Configuration des widgets de menu à l’aide du panneau Options

Modification et personnalisation du style des libellés de menus

La procédure suivante vous explique comment mettre à jour les libellés de texte qui affichent les noms de page dans chaque élément de menu. Imaginez un widget de menu horizontal qui utilise une conception très basique avec des liens texte simples. Dans cet exemple, nous allons supposer que le même format de police est utilisé pour tous les états.

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

  2. 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.
    Modification des libellés de menus dans les widgets de menu
    Modification des libellés de menus dans les widgets de menu
  3. 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.

  4. 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.

    Application de paramètres de fond et de contour aux libellés de menus
    Application de paramètres de fond et de contour aux libellés de menus

Création d’états de survol pour des éléments de menu

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

    Définition d’états de bouton
    Définir l’état actif de l’élément de menu.

    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.

  8. 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.

    Remarque :

    Les repères des régions d’en-tête et de pied de page peuvent être uniquement modifiés dans les gabarits de votre site. Chaque fois que vous souhaitez modifier la taille de l’en-tête ou du pied de page de vos pages, double-cliquez sur le gabarit pour l’ouvrir dans la vue Conception et repositionner les repères.

Création d’un menu mobile

Adobe Muse vous permet également de créer un menu en sandwich ou un menu mobile. Lorsque vous créez ce type de menu, un sous-menu déroulant apparaît lorsque vous passez le curseur sur le menu principal. Pour créer ce type de menu, voir Création de sous-menus en utilisant des widgets de composition.

Exclusion de pages du menu

Chaque fois que vous créez une nouvelle page de niveau supérieur pour votre site dans la vue Plan, Adobe Muse ajoute automatiquement la page au menu. Cependant, il peut arriver que vous vouliez tester une page avant de la rendre accessible aux visiteurs ou masquer une page spécifique. Dans ces cas, Adobe Muse vous permet d’exclure des pages spécifiques de la navigation pour vous assurer que ces pages n’apparaissent pas parmi les éléments de menu dans le widget de menu.

Procédez comme suit pour exclure des pages du widget de menu :

  1. 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.

    Affichage du plan du site dans la vue Plan
    Affichage du plan du site dans la vue Plan

    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.

  2. 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.

    Exclusion de certaines pages des widgets de menu
    Exclusion de certaines pages des widgets de menu

    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.

    Remarque :

    Pour supprimer l’ensemble du menu, rendez-vous sur la page où vous avez ajouté le widget de menu. Sélectionnez le widget et cliquez sur Supprimer.

    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.

Utilisation des widgets de menu

Utilisation des widgets de menu
Dans cette vidéo, présentée par Brian Wood, vous découvrirez comment insérer un widget de menu dans votre page.
Adobe Press - Peachpit

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne