Faites glisser le widget Barre de navigation sur une page maîtresse, puis associez cette page maîtresse à vos pages. Le menu se construit automatiquement à partir de la liste des pages à gauche : quand vous ajoutez une page, elle apparaît dans le menu sur toutes les pages.
Quelle version utilisez-vous ? EverWeb 4.6 propose une nouvelle Barre de navigation avec de nouveaux réglages, décrits ci-dessous. Un menu ajouté avant la version 4.6 conserve ses anciens réglages (les sections EverWeb 4.5 ci-dessous), même lorsque vous ouvrez le projet dans la version 4.6. Pour passer un ancien menu aux nouveaux réglages, supprimez-le, faites glisser une nouvelle Barre de navigation sur la page maîtresse, puis mettez-la de nouveau en forme.
Ajouter le menu sur toutes les pages
- Créez une page maîtresse (une mise en page partagée par plusieurs pages) si vous n'en avez pas : cliquez sur Nouvelle page maîtresse. Consultez Placer le même en-tête, le même menu et le même pied de page sur toutes les pages avec une page maîtresse.
- Sélectionnez la page maîtresse et ajoutez le menu :
- Barre de navigation : ouvrez l'onglet Widgets en haut à droite et faites glisser le widget Barre de navigation sur la page. Sur une page à largeur fixe (Mise en page centrée), placez-le dans l'en-tête. Sur une page adaptative, placez-le près du haut.
- Conteneur de navigation (EverWeb 4.6 et versions ultérieures) : cliquez sur Conteneurs dans la barre d'outils et choisissez Conteneur de navigation. Il contient une Barre de navigation ainsi qu'un emplacement pour votre logo, et convient bien aux pages adaptatives.
- Sélectionnez l'une de vos pages, allez dans Inspecteur > Paramètres de page et choisissez votre page maîtresse dans le menu déroulant Modèle maître. Faites-le pour chaque page.
- Publiez votre site Web.
Désormais, modifiez le menu uniquement sur la page maîtresse. Sur vos autres pages, le menu affiche une petite icône de page noire dans son coin ; un clic sur cette icône vous propose d'ouvrir la page maîtresse.
Choisir les pages qui figurent dans le menu
- Ordre : le menu suit l'ordre de la liste des pages, de haut en bas. Faites glisser les pages vers le haut ou vers le bas pour le modifier.
- Exclure une page : sélectionnez la page, allez dans Inspecteur > Paramètres de page et décochez Inclure la page dans le menu de navigation. La page reste sur votre site Web, et vous pouvez toujours créer des liens vers elle.
- Modifier le libellé : saisissez-le dans Nom complet du menu de navigation, dans le même onglet. Utilisez ce champ pour les espaces, les accents et les symboles, que le nom de fichier d'une page ne peut pas contenir.
EverWeb 4.6 et versions ultérieures : ajoutez vos propres éléments de menu. Sélectionnez la Barre de navigation, allez dans Inspecteur > Réglages des widgets et ouvrez Liens de menu supplémentaires. Cliquez sur Ajouter, double-cliquez sur le nom pour modifier le libellé, puis définissez son lien : une section d'une page, une page ou un autre site Web. Cochez Masquer les pages de mon site si vous voulez que le menu n'affiche que les liens de cette liste. Une nouvelle page n'apparaîtra alors dans le menu qu'une fois que vous l'aurez ajoutée à cette liste.
Le menu figure sur toutes les pages : quand vous le modifiez, EverWeb doit donc publier à nouveau toutes les pages. Votre prochaine publication prendra plus de temps que d'habitude.
Menus déroulants
Placez des pages dans un répertoire (une page qui contient d'autres pages, comme un dossier). Cliquez sur Ajouter un répertoire dans la barre d'outils, puis faites glisser des pages juste en dessous et légèrement à droite de celui-ci. Le répertoire devient un élément du menu, et ses pages apparaissent dans un menu déroulant en dessous. Consultez EverWeb peut-il créer des menus déroulants ?.
Dans EverWeb 4.6 et les versions ultérieures, le menu affiche jusqu'à deux niveaux de menus déroulants : placez un répertoire dans un répertoire pour obtenir le second, soit trois niveaux de menu au total. EverWeb 4.5 affiche un seul niveau de menu déroulant. Sous Menus déroulants dans Réglages des widgets, Indicateur de sous-menu définit le petit symbole affiché à côté des éléments qui ouvrent un menu déroulant (Chevron, Triangle, Plus ou aucun), et Style des éléments du menu déroulant définit le style de bouton des éléments du menu déroulant.
Modifier son apparence
EverWeb 4.6 et versions ultérieures : style des éléments du menu
Les éléments du menu tirent leur apparence (remplissage, couleurs du texte, marge intérieure et effet de survol) d'un style de bouton. Votre projet en contient un prévu à cet effet, appelé Navigation Button (bouton de navigation).
- Sélectionnez la Barre de navigation et allez dans Inspecteur > Réglages des widgets.
- Ouvrez Éléments du menu et choisissez un style de bouton dans Style des éléments du menu. Un petit aperçu s'affiche à côté, et le menu se met à jour sur la page.
- Pour modifier l'apparence de ce style, choisissez Modifier les styles de bouton... en bas du même menu (ou utilisez Format > Styles du site... et cliquez sur Styles de bouton). Réglez les apparences Normal, Survol, Appuyé et Focus clavier, puis cliquez sur Enregistrer. Tous les menus et boutons qui utilisent ce style changent.
Pour toutes les étapes concernant les styles de bouton, consultez Créer des boutons qui donnent envie de cliquer : couleurs, coins arrondis, ombres et effets de survol.
Bon à savoir :
- Aucun dans Style des éléments du menu transforme les éléments en simples liens texte. Leurs couleurs proviennent alors de Inspecteur > Hyperliens.
- L'arrière-plan de la barre est indépendant des éléments. Le Remplissage, la Bordure et la marge intérieure dans Inspecteur > Options de forme et Mesures mettent en forme la bande située derrière les éléments, et non les éléments eux-mêmes.
- Hauteur minimale des éléments définit la hauteur de chaque élément (0 lui donne la hauteur de son texte et de sa marge intérieure). Environ 44 pixels ou plus permettent de toucher facilement un élément sur un téléphone.
- Disposition comprend Largeurs de bouton égales, Espacement des éléments et Alignement (à gauche, centré, à droite ou justifié).
- Polices, dans la barre d'outils, modifie le texte des éléments, et les effets de Transitions et animations de la souris dans les options de forme s'appliquent à chaque élément.
- Sans Conteneur de navigation, Marque dans les réglages des widgets peut afficher votre logo dans la barre. Donnez-lui un Texte alternatif du logo, par exemple le nom de votre entreprise.
EverWeb 4.5 (et menus ajoutés avant la version 4.6)
Avec la Barre de navigation sélectionnée : les couleurs du texte et le soulignement se trouvent dans Inspecteur > Hyperliens, sous Formatage des hyperliens ; le cadre derrière chaque élément se trouve dans Options de forme ; l'alignement, l'espacement et les couleurs des menus déroulants se trouvent dans Réglages des widgets ; la police se trouve sous Polices dans la barre d'outils.
Le menu sur les téléphones
EverWeb 4.6 et versions ultérieures
- Sélectionnez la Barre de navigation sur votre page maîtresse et allez dans Inspecteur > Réglages des widgets.
- Sous Disposition, choisissez ce qui se passe dans Si l’espace est limité :
- Retour à la ligne : les éléments passent sur plusieurs lignes.
- Hamburger when needed (hamburger si nécessaire) : le menu devient un bouton de menu quand les éléments ne tiennent plus.
- Hamburger at breakpoint (hamburger au point d'arrêt) : le menu devient un bouton de menu en dessous de la largeur que vous saisissez dans Point d’arrêt (px) (800 sauf si vous la modifiez).
- Mettez en forme le bouton sous Menu hamburger mobile : son Style de bouton, le Libellé du bouton de menu (par exemple Menu), l'Icône du menu (trois lignes, deux lignes, points ou aucune icône) et Menu ouvert.
- Sous Apparence du menu hamburger, choisissez si le menu ouvert recouvre la page ou la pousse vers le bas (Présentation), et réglez l'Arrière-plan du panneau de menu. Animation et comportement mobiles définit l'Effet d’ouverture et indique si le menu se ferme après qu'un visiteur a choisi une page.
- Lancez l'aperçu et réduisez la largeur de la fenêtre EverWeb pour tester.
EverWeb 4.5 (et menus ajoutés avant la version 4.6)
- Sélectionnez la Barre de navigation sur votre page maîtresse.
- Allez dans Inspecteur > Réglages des widgets et faites défiler jusqu'à Options réactives.
- Cochez Barre de navigation réactive.
- Réglez Apparaître à une largeur. Sur les écrans plus étroits que cette valeur (700 pixels sauf si vous la modifiez), le menu devient un bouton à trois lignes (un "hamburger") qui ouvre le menu. Mettez-le en forme sous Bouton hamburger.
- Lancez l'aperçu et réduisez la largeur de la fenêtre EverWeb pour tester.
Si votre menu passe sur deux lignes avant de se transformer, augmentez la largeur. Si le bouton s'affiche aussi sur les ordinateurs, la valeur est trop élevée. Cela fonctionne sur les pages en mise en page centrée et les pages adaptatives. Si vous utilisez des pages mobiles distinctes, consultez Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb.
Questions fréquentes
- Un lien vers un autre site Web dans le menu : dans EverWeb 4.6 et les versions ultérieures, ajoutez-le sous Liens de menu supplémentaires (voir ci-dessus). Dans la version 4.5, consultez Comment placer un lien vers un autre site Web dans le menu de navigation d'EverWeb.
- Des éléments de menu qui mènent à des sections d'une longue page : dans EverWeb 4.6 et les versions ultérieures, utilisez Liens de menu supplémentaires et liez chaque élément à une section de la page. Dans la version 4.5, la Barre de navigation ne peut pas le faire : créez ce menu avec des boutons ou du texte et ajoutez un lien à chacun. Consultez Comment créer un lien vers une autre page, un site Web, une adresse e-mail, un numéro de téléphone, un PDF ou une section d'une page.
- Les éléments du menu ne changent pas quand vous réglez leurs couleurs dans Hyperliens (4.6) : les éléments utilisent un style de bouton. Modifiez ce style, ou choisissez Aucun dans Style des éléments du menu pour utiliser les couleurs des hyperliens.
- Toute la barre a pris une seule couleur (4.6) : le Remplissage propre à la barre se règle dans les options de forme. Désactivez le remplissage de la barre si vous voulez que seuls les éléments soient colorés.
- Un élément de menu qui ne fonctionne pas : vérifiez qu'il fait bien partie de la Barre de navigation, et qu'il ne s'agit pas d'une zone de texte séparée placée par-dessus.
Articles associés
- Placer le même en-tête, le même menu et le même pied de page sur toutes les pages avec une page maîtresse
- Créer des boutons qui donnent envie de cliquer : couleurs, coins arrondis, ombres et effets de survol
- EverWeb peut-il créer des menus déroulants ?
- Comment placer un lien vers un autre site Web dans le menu de navigation d'EverWeb
- Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb