Configurer la barre de navigation
Dans cet article
Qu'est-ce qu'une barre de navigation ?
Un site web est généralement composé d'une barre de navigation principale et d'une barre de navigation secondaire que l'on peut voir sur toutes les pages du site. Elles permettent aux visiteurs du site d'accéder aux différentes parties du site.
Barre de navigation principale
La barre de navigation principale de la plateforme se situe en haut de page. Elle est composée de 5 éléments :
- Un logo placé à gauche. Il se configure dans le menu Réglages > Apparence.
- Les éléments de menus (rubriques) qui permettront la navigation.
- Les boutons Connexion et Inscription si l'utilisateur n'est pas connecté.
- L'avatar et le nom de l'utilisateur sous forme de menu déroulant permettant de se déconnecter, d'accéder à l'administration, aux paramètres du profil et au profil.
Lorsque la taille horizontale de la fenêtre se réduit et qu'il n'y a pas suffisamment de place pour afficher tous ces éléments, un bouton Plus apparait en remplacement des rubriques les plus à droite.
Si la page est encore réduite, le site rassemblera toutes les rubriques dans un menu "hamburger". C'est le cas notamment lors de l'utilisation de la plateforme sur mobile.
Nouveauté ! Avec la nouvelle barre de navigation (en cours d'activation sur les plateformes), elle s'adapte à vos contenus.
Un logo vertical agrandira la hauteur de votre barre de navigation.
De même, si vos rubriques de navigation sont nombreuses, le menu s'affichera sous le logo pour donner plus de place à votre contenu :
Si une de vos rubriques a 7 sous-rubriques ou plus, la barre de navigation les affiche dans un "méga-menu" :
Les couleurs de la barre de navigation changent également. Sur l'ancienne barre nous avions la couleur de fond du menu et la couleur des éléments du menu au survol et actifs (ainsi que les libellés). Une couleur supplémentaire est intégrée avec cette nouvelle barre de navigation, il s'agit de la couleur de fond des sous-menus (l'orange clair sur l'image ci-dessus).
Attention ! Lors de l'activation de la nouvelle barre de navigation, il faudra adapter les couleurs.
CAS N°1 -> Si votre menu a une couleur de fond blanc ou couleur très claire avec une couleur au survol foncée, il passera de cet affichage :
à cet affichage :
On observe qu'une nouvelle couleur (le gris clair ici) permet de mettre en avant les menus et sous-menus en plus de la couleur de survol/sélection qui est toujours présente.
Pour améliorer cet affichage et adapter votre barre de navigation au nouveau design, nous vous recommandons les modifications de couleurs suivantes dans la page Réglages > Apparence :
- Libellé du menu actif et Libellé du menu au survol > mettre la même couleur que le Libellé du menu.
Devient donc :
- Fond des éléments de menu au survol et actif > éclaircir cette couleur car elle sera souvent trop foncée (car le libellé est maintenant lui-même foncé)
Ici nous avons éclairci le bleu :
- Fond des sous-menus > remplacer le gris par défaut par une version encore plus éclaircie de la couleur précédente (afin de garder une harmonie de couleur mais permettre une distinction entre les sous-menus et les éléments survolés/sélectionnés).
Le résultat est le suivant :
CAS N°2 -> Si votre menu a une couleur de fond foncée avec une couleur au survol claire
Il faudra à l'inverse assombrir les couleurs là où on les a éclairci dans l'exemple précédent pour obtenir un résultat comme celui-ci :
Barre de navigation secondaire
La barre de navigation secondaire de la plateforme se trouve en bas de page. Outre la mention "Propulsé par Cap Collectif", elle est seulement composée des rubriques choisies (par défaut "Comment ça marche" et "Confidentialité").
Comment configurer les barres de navigation ?
Les deux barres de navigation se configurent dans le menu de l'administration Réglages > Navigation. Les rubriques des deux menus se présentent sous forme de liste des éléments de menus (rubriques).
Cliquez sur le bouton Editer pour modifier un des éléments ou sur le bouton Ajouter en haut à droite pour créer un nouvel élément de menu.
Titre
Il s'agit du nom de l'élément. Il doit être court et descriptif.
Publié
Pour que la rubrique soit visible sur la façade de la plateforme, la case Publié doit être cochée. Si elle ne l'est pas, la rubrique sera toujours accessible dans l'administration mais ne sera pas visible par les utilisateurs de la plateforme sur la façade.
Vous pouvez par ailleurs publier ou dépublier un élément directement à partir de la vue liste des rubriques grâce au bouton de la colonne Publié.
Menu
Choisissez grâce à ce champ si l'élément de menu sera placé dans la barre de navigation principale (en haut de la page) ou secondaire (en pied de page).
Position
La position permet de définir l'ordre des rubriques. Les éléments de menu sont classés de gauche à droite en fonction de la valeur indiquée, la plus petite valeur correspondant à l'élément le plus à gauche, la plus haute valeur à l'élément le plus à droite.
Dans l'exemple ci-dessous, "Accueil" est en position 1, "Projets participatifs" en position 2, "Actualités" en position 3, etc... Le résultat serait cependant le même si "accueil" avait été en position 15, "thèmes" en positions 23, "actualités" en positions 120, etc.
Les positions des éléments du menu principal sont indépendantes des positions des éléments du menu en pied de page. Il en va de même pour les éléments de menus situés dans un élément parent.
Parent
Dans l'exemple ci-dessous, la rubrique Actualités n'est pas un lien vers une page mais permet d'afficher un sous-menu. Ceci est possible grâce à la notion de menus parents. Un tel menu est signalé par la présence d'une petite flèche sur la droite.
Dans le champ Parent, l'élément de menu Actualités a été sélectionné pour rattacher Articles et Évènements à Actualités.
Cliquez sur le bouton Ajouter pour créer un nouvel élément de menu destiné à devenir parent.
Seul un élément de menu qui n'a pas été lié à une page ou à un lien peut être sélectionné comme Parent.
Page
Le champ Page permet de sélectionner une page personnalisée (Voir article : Ajouter une page personnalisée). Ainsi, l'élément de menu devient un lien vers cette page personnalisée.
Le bouton add est un raccourci de création d'une nouvelle page personnalisée. Il n'est ainsi pas nécessaire de créer la page dans le menu Contenu > Pages personnalisées puis de revenir dans le menu Réglages > Navigation pour l'ajouter à la navigation. Vous retrouverez cependant la page créée via le raccourci dans le menu Contenu > Pages personnalisées dans le cas où vous souhaiteriez la modifier.
Lien
Enfin, il est possible de donner un lien à votre élément de menu. S'il s'agit d'un lien vers une page de la plateforme, il doit être de préférence de ce format :
Par exemple, nous n'écrirons pas http://exemple.cap-collectif.com/pages/comment-ça-marche, mais plutôt /pages/comment-ça-marche. Ainsi, si l'URL de la plateforme est voué à changer, les liens resteront valides.
Comment créer un menu vers un type de projet ?
Les types de projets permettent de catégoriser les projets participatifs. Lorsqu'un type de projet est choisi pour un projet participatif, un bandeau vient s'ajouter au-dessus de l'aperçu du projet :
En haut de la page /projects, on trouve un filtre par type de projets grâce auquel les utilisateurs peuvent afficher seulement les projets participatifs d'un certain type :
De la même manière, vous pouvez créer un menu qui n'affiche qu'un type de projet. Pour cela, créez un nouvel élément de menu.
Dans le champs Lien, ajoutez le lien suivant :
https://URLDEVOTREPLATEFORME/projects?type=
Dans le cas présent, seule l'URL complète du site peut être utilisée. Les URL relatives ne sont pas compatibles avec le filtre.
Après le ?type= à la fin du lien, ajoutez l'un des chiffres suivants. Ils correspondent à chacun des types de projets disponibles.
- 1 (Appel à projets)
- 2 (Consultation)
- 3 (Interpellation)
- 4 (Budget participatif)
- 5 (Pétition)
- 6 (Enquête publique)
- 7 (Questionnaire)
- 8 (Boîte à idées)
- 9 (Débat)
- 10 (Votation)
- 11 (Questions/Réponses)
- 12 (Financement participatif)
- 13 (Entraide)
- 14 (Concertation)
- 15 (Enquête)
- 16 (Appel à candidatures)
- 17 (Quiz)
- 18 (Témoignages)
Par exemple, écrivez https://votreplateforme.cap-collectif.com/projects?type=2 pour afficher tous les projets participatifs que vous avez désignés comme étant des consultations lors de leur création.
Vous pouvez ainsi créer un menu par type de projets utilisé sur votre plateforme.
