Sous-menus dans le menu de navigation principale
Les sous-menus sont utilisés pour regrouper les pages ou sections thématiquement liées, évitant l'encombrement du menu principal.
Attention, leur utilisation peut être complexe sur mobile. Une page de navigation pourrait remplacer les sous-menus. Il est essentiel de considérer les besoins de l'utilisateur et de tester pour garantir une navigation aisée.
Les sous-menus se classifient en trois types :
- Menus déroulants : offrent une liste de liens supplémentaires sous un élément de navigation.
- Menu « Plus » : affiche les éléments excédentaires sous un élément « Plus ». Voir la documentation sur le principe de « Priorité Plus ».
- Mégamenus : affichent une grande zone de navigation avec plusieurs options sous un seul élément de navigation.
À l’intérieur de ceux-ci se trouvent :
A - Liens de sous-menu : lien dans un sous-menu (présents dans les 3 types) qui pointe vers une page spécifique du site Web.
B - Liens parents : dans un menu « Plus », tous les éléments de navigation excédentaires qui y sont regroupés ont un style plus grand que les liens de sous-menu. Le terme « parent » fait référence à l'élément de navigation principal.
C - Liens parent-enfants : dans un menu « Plus », une structure d'accordéon permet de déployer les liens de sous-menu. Le terme « enfant » fait référence aux liens de sous-menu qui sont regroupés sous le parent.
D - Titres de section : dans un mégamenu, il s'agit du libellé qui regroupe un ensemble de liens de sous-menu liés.
Menu déroulant
Menu « Plus »
Mégamenu
Menus déroulants
Les menus déroulants contiennent habituellement entre 5 et 10 liens.
Chaque lien doit être pertinent et le menu dans son ensemble doit être facile à naviguer.
Les menus déroulants ne permettent pas la présentation de liens parent-enfants.
En format mobile, il est crucial de considérer la taille réduite de l'écran pour assurer une navigation fluide.
Menu « Plus »
Le menu « Plus » contient les éléments excédentaires qui ne peuvent pas être affichés en raison de contraintes d'espace (entre 3 et 4, en suivant les directives sur le nombre d’éléments de navigation).
Les éléments de navigation ouvrant un sous-menu qui, en raison d'un manque d'espace, se retrouvent dans le menu « Plus », doivent présenter leurs liens « enfants » sous forme d'accordéon.
Mégamenus
Les mégamenus sont utiles pour les sites riches en contenu, car ils affichent de nombreuses options simultanément. Il faut toutefois veiller à ne pas submerger l'utilisateur.
En général, un mégamenu peut contenir de 10 à 40 liens au total, selon la complexité du site et les besoins des utilisateurs.
Chaque lien doit être pertinent, le menu dans son ensemble doit être facile à naviguer et la taille du menu ne doit pas encombrer la page.
Le menu peut être divisé en 2 à 4 sections de liens, chaque section regroupant des contenus similaires. Ces regroupements n'apparaissent pas dans le fil d'Ariane, car ils ne sont pas liés à une page spécifique.
Les mégamenus ne permettent pas la présentation de liens parent-enfants.
En format mobile, il est crucial de considérer la taille réduite de l'écran pour assurer une navigation fluide.
Informations techniques
Des informations techniques sont fournies pour les éléments communs aux 3 types de sous-menus, pour les menus déroulants, les menus « Plus » et les mégamenus.
Éléments communs aux 3 types de sous-menus
Positionnement
Les sous-menus apparaissent sous l’élément de navigation correspondant dès que ce dernier est cliqué. Le sous-menu est généralement aligné à gauche avec son élément de navigation, à moins que l’espace soit insuffisant, il pourra alors être aligné à droite avec l’élément de navigation.
Liens de sous-menu
Les liens de sous-menus sont superposés.
Soulignement latéral (page ou section courante)
Lorsqu'un lien de sous-menu est activé, un soulignement apparaît à sa gauche.
Dimensions
La hauteur des sous-menus est déterminée par le nombre d'éléments qu'ils contiennent. Il est crucial d'assurer que la plupart des liens soient immédiatement visibles sans avoir besoin de faire défiler la page ou l'intérieur du menu déroulant, améliorant ainsi l'accessibilité et la facilité d'utilisation.
La largeur et le positionnement du menu doivent être considérés afin qu'il ne dépasse pas à gauche ou à droite des marges de contenu du site.
Liens de sous-menu
Les dimensions des liens de sous-menu occupent toute la largeur de contenu du sous-menu. La hauteur de chacun est influencée par le libellé textuel du lien.
En format bureau, la taille des caractères des liens sous-menu est de 16 px avec un interlignage de 24 px. En format mobile, la taille est de 13 px et l’interlignage passe à 16 px. Leur graisse est régulière.
Soulignement latéral (page ou section courante)
Le soulignement latéral a une largeur de 4 px. Il occupe la totalité de la hauteur du lien : sa dimension verticale est modulée en fonction des espacements autour du lien (voir la section Espacements ci-bas).
Espacements
Il n’y a pas d’espace entre le bas du menu de navigation principale et le sous-menu.
À l’intérieur du conteneur de sous-menu, il y a un dégagement de 12 px en haut et en bas.
Liens de sous-menu
Chaque lien de sous-menu est positionné directement sous le suivant, sans aucun espace (0 px) entre eux. Le dégagement intérieur de chacun de ces liens suffit à assurer une bonne séparation visuelle en haut et en bas du libellé textuel.
Chaque lien de sous-menu a un dégagement intérieur de 20 px à gauche et à droite. De plus, un dégagement de 8 px est appliqué tant en haut qu'en bas du lien.
Soulignement latéral (page ou section courante)
Le soulignement latéral de 4 px de large se trouve à la gauche du dégagement de 20 px dans les liens (il y a donc un espace de 16 px entre le bord droit du soulignement et la gauche du libellé du lien).
États
Par défaut
Les sous-menus sont cachés par défaut.
La couleur de fond du conteneur de sous-menu est #FFFFFF. L’ombrage sous ce fond est l’Élévation 3.
La couleur de tous les liens de sous-menu est #095797. Les liens ne sont pas soulignés.
CSS des conteneurs de sous-menus - par défaut
background-color: #ffffff;
box-shadow: 0 4px 16px rgba(34, 54, 84, 0.24);
CSS des liens de sous-menu - par défaut
color: #095797;
padding: 8px 20px;
text-decoration: none;
font-size: 16px; /* format bureau */
line-height: 24px; /* format bureau */
font-size: 13px; /* format mobile */
line-height: 16px; /* format mobile */
Au survol
Lorsqu'un lien de sous-menu, un lien parent ou un lien parent-enfants est survolé, la couleur de fond de cet élément passe à #F6F6F7.
Le texte devient souligné.
Le soulignement latéral de 4 px apparaît, de la même couleur que le texte des liens.
CSS des liens de sous-menu - au survol
background-color: #f6f6f7;
text-decoration: underline;
Au focus
Au focus, le lien de sous-menu, le lien parent ou le lien parent-enfants a un contour extérieur de 2 px de couleur #4A98D9.
CSS des liens de sous-menu - au focus
outline: 2px solid #4a98d9;
Actif
Lorsqu'un lien de sous-menu, un lien parent ou un lien parent-enfants est activé, la graisse du texte de cet élément passe en bold.
Le soulignement latéral de 4 px est visible, de la même couleur que le texte des liens.
CSS des liens de sous-menu - actif
font-weight: bold;
border-left: 4px solid #095797;
Menus déroulants
Positionnement
Pour les menus déroulants, il faut aligner le menu déroulant à gauche (ou à droite, au besoin) de son élément de navigation parent.
Dimensions
Pour les menus déroulants, la largeur peut varier en fonction du contexte spécifique du site.
Menu « Plus »
Positionnement
Pour le menu « Plus », il faut aligner le menu à gauche (ou à droite, au besoin) de son élément de navigation parent.
Liens parents et liens parent-enfants
Les liens parents et les liens parent-enfants sont superposés, tout comme les liens de sous-menus.
Le chevron est positionné à droite du lien parent-enfants.
Liens de sous-menu enfant
Un tiret est ajouté à gauche des liens enfants déployés par un lien parent-enfants.
Dimensions
Pour le menu « Plus », la largeur peut varier en fonction du contexte spécifique du site.
Liens parents et liens parent-enfants
En format bureau, la taille des caractères des liens parents et des liens parent-enfants est plus grande que celle des liens de sous-menu.
Le chevron à droite du lien parent-enfants a un taille de 16 px de large par 8 px de haut.
Liens de sous-menu enfant
Le tiret devant les liens enfants a une largeur de 8 px et une hauteur de 1 px.
Espacements
Liens parents et liens parent-enfants
Chaque lien, qu’il soit parent ou parent-enfants, est positionné directement sous le suivant, sans aucun espace (0 px) entre eux. Le dégagement intérieur de chacun de ces liens suffit à assurer une bonne séparation visuelle en haut et en bas du libellé textuel.
Chaque lien, qu’il soit parent et/ou parent-enfants, a un dégagement intérieur de 20 px à gauche et à droite. De plus, un dégagement de 8 px est appliqué tant en haut qu'en bas du lien.
Il y a un espace de 8 px entre le lien parent-enfants et son chevron.
Liens de sous-menu enfant
Il y a un espace de 8 px entre le tiret et le lien enfant.
États
Par défaut
En format bureau, la taille des caractères et la graisse des liens parents et des liens parent-enfants est plus grande que celle des liens de sous-menu déroulant.
CSS des liens parent et parent-enfants - par défaut
font-weight: semibold;
font-size: 18px; /* format bureau */
line-height: 28px; /* format bureau */
font-size: 13px; /* format mobile */
line-height: 16px; /* format mobile */
Mégamenus
Positionnement
En format bureau, chaque section de liens est disposée côte à côte. En format mobile, elles sont superposées.
Titres de section
Les titres de section sont au-dessus de leur groupe de liens.
Dimensions
Les mégamenus peuvent avoir une largeur allant jusqu'à la largeur totale de la zone de contenu dans le menu de navigation principale.
Chaque section de liens dans le mégamenu est séparée de la suivante par un filet séparateur de 1 px de couleur gris pâle.
Titres de section
Les dimensions des titres de section occupent toute la largeur de contenu du sous-menu. La hauteur de chacun est influencée par le libellé textuel du lien.
En format bureau, la taille des caractères des titres de section est de 19 px avec un interlignage de 24 px. En format mobile, la taille est de 16 px et l’interlignage passe à 20 px. Leur graisse est moyenne (medium). La police de caractères est Roboto.
Espacements
Titres de section
Chaque titre de section a un dégagement de 20 px à gauche et à droite, de 8 px en haut et de 16 px en bas.
États
Par défaut
Chaque section de liens dans le mégamenu est séparée de la suivante par un filet séparateur de 1 px de couleur gris pâle (#F1F1F2).
CSS des sections - par défaut
border-left: 1px solid #f1f1f2; /* sauf la première section */
CSS des titres de section - par défaut
padding: 8px 20px 16px;
font-family: Roboto;
font-weight: medium;
font-size: 19px; /* format bureau */
line-height: 24px; /* format bureau */
font-size: 16px; /* format mobile */
line-height: 20px; /* format mobile */
Dernière mise à jour : 6 novembre 2023