Adapter le menu à l’ordinateur et au téléphone

Le menu conserve ses liens quand vous changez sa présentation. Vous choisissez comment ils se montrent sur ordinateur, puis comment ils s’ouvrent sur téléphone. L’aperçu dans la page permet de juger le résultat avec votre logo et votre thème.

1. Choisir la présentation sur ordinateur

Dans Menu du site, ouvrez Apparence. Sur ordinateur, la barre se règle avec des commandes séparées : alignement, taille, styles des liens et des boutons, puis forme des sous-menus.

Dans Sous-menus, choisissez Liste pour quelques destinations ou Grand panneau pour une présentation plus large, en colonnes. Chaque entrée principale peut également choisir sa propre forme.

Un ancien menu peut encore utiliser une présentation historique. Un message propose alors de passer aux réglages actuels. Si un avertissement indique que des sous-liens sont masqués, vérifiez leurs destinations avant de publier. Pour ajouter une section entière au panneau, consultez les sous-menus à contenu riche.

2. Régler les liens et les boutons

L’alignement place les liens dans la barre. La taille règle leur texte et leur espacement. Les aperçus de Liens et Boutons permettent de choisir leur présentation sans saisir de code. Une entrée peut aussi conserver une apparence propre définie dans sa fiche.

Le réglage Sous-menus choisit la forme habituelle des sous-menus. Un parent peut remplacer ce choix pour son propre sous-menu. Le choix commun et le choix propre à une entrée ne sont donc pas deux réglages contradictoires : le plus précis s’applique à cette entrée.

Un design sur mesure peut remplacer certains réglages visuels. Un champ grisé indique pourquoi il n’agit plus. Ne multipliez pas les changements sans voir de résultat ; relisez ce message avant de modifier le thème ou le contenu.

3. Choisir le menu sur téléphone

Les cinq présentations mobiles répondent à des besoins différents :

• Tiroir : un panneau latéral ; ouvrir un sous-menu referme l’autre.
• Plein écran : une grande zone couvrant l’écran, adaptée à un menu court.
• Accordéon : les sous-menus se déplient sous la barre et peuvent rester ouverts ensemble.
• Liste déroulante : une liste dans une carte sous le bouton, avec les sous-liens décalés.
• Par niveaux : un sous-menu remplace la liste avec une commande pour revenir.

Dans la démonstration, nous choisissons Plein écran, passons au cadre de 375 pixels, activons Aperçu sans interface, ouvrons le menu et retrouvons le bouton de réservation. Choisir une carte mobile dans le panneau ne suffit pas : ouvrez aussi le menu dans son rendu.

4. Régler le défilement et la bascule

Rester visible au défilement maintient la barre en haut de l’écran. Par-dessus la première image place une barre transparente au-dessus du début de page, avec des liens clairs. Ce second choix demande un fond qui rend ces liens lisibles ; il n’améliore pas automatiquement un fond clair.

Dans Plus de réglages, choisissez à partir de quelle largeur les liens se replient dans un bouton de menu. Le seuil et la largeur du cadre de travail sont distincts : le seuil appartient au menu ; le cadre sert à le tester.

Lorsqu’un bouton principal existe, Bouton toujours visible peut le conserver près de l’icône du menu sur téléphone. Vérifiez qu’il tient avec votre logo et un libellé raisonnablement court. La flèche des sous-menus peut aussi être réglée ici.

5. Vérifier l’usage, pas seulement le dessin

Enregistrez, puis contrôlez le menu à une largeur de téléphone et sur ordinateur. Ouvrez un sous-menu au clavier, refermez-le et suivez un lien. Sur le site publié, vérifiez le défilement, l’état de la page active et les destinations.

Regardez les largeurs intermédiaires : une barre qui déborde juste avant sa bascule est encore un menu difficile à utiliser. Un titre de lien plus court ou une bascule plus précoce peut résoudre ce problème sans ajouter de code.