Un méga-menu est un grand panneau qui s'ouvre sous la barre de navigation et présente une rubrique entière en colonnes, au lieu d'un sous-menu étroit qui se déroule entrée par entrée.
Corpus l'active à la demande, entrée par entrée. Un site qui n'en veut pas n'en a pas, et son menu ne change en rien.
Il n'y a rien à construire. Le panneau se règle par la hiérarchie du menu : c'est elle qui fait les colonnes. Vous n'aurez pas à redire dans un formulaire ce que votre menu dit déjà.
Quand un méga-menu se justifie
Quand une entrée de barre porte plus d'une dizaine de pages et qu'elles se rangent naturellement en deux ou trois familles. Un sous-menu de dix-huit lignes se parcourt mal ; les mêmes dix-huit pages en trois colonnes titrées se lisent d'un coup d'œil.
Sous une dizaine d'entrées, le sous-menu ordinaire reste plus lisible. Le méga-menu n'est pas un embellissement : il répond à un menu trop long.
Comment le mettre en place
1. Déclencher le panneau
Ouvrez l'entrée de menu de premier niveau qui doit s'ouvrir en grand. Onglet Type de liens, champ Style CSS du lien : écrivez mega.
C'est tout. L'entrée garde sa page, son intitulé et son pictogramme.
Les champs d'image ne déclenchent rien. Image du lien et Classe de l'image portent déjà les pictogrammes du menu ; c'est Style CSS du lien qui ouvre le panneau, et lui seul.
Le mot mega ne ressort pas dans la page : il est lu par le template, puis retiré. Si vous écrivez mega ma-classe, ma-classe reste sur le lien.
2. Faire les colonnes
Chaque entrée de deuxième niveau devient une colonne.
Pour un titre de colonne non cliquable, le cas courant, créez l'entrée avec le type Titre de sous-menu (Joomla la propose sous Liens divers). Elle ne mène nulle part, et c'est voulu : elle nomme la colonne.
Si vous préférez que le titre mène à une page, créez une entrée ordinaire : son titre reste un lien. Les deux formes se dessinent pareil.
3. Remplir les colonnes
Les entrées de troisième niveau sont les pages de la colonne.
Une page qui a elle-même des enfants reçoit un chevron à sa droite : les entrées de quatrième niveau forment le volet qui se déplie dessous, dans sa colonne, sans rien pousser ailleurs.
4. Vérifier
| Niveau | Ce que ça devient |
|---|---|
| 1 | L'entrée de la barre, celle qui porte mega |
| 2 | Une colonne du panneau, avec son titre |
| 3 | Les pages de la colonne |
| 4 | Le volet replié sous une page |
Le méga-menu est le seul endroit de Corpus où l'on descend à quatre niveaux. Partout ailleurs le menu s'arrête à trois, et les entrées plus profondes sont ignorées.
Une colonne sans page reste une colonne vide. Si vous mettez au deuxième niveau une entrée qui n'a aucun enfant, elle sort avec son titre et rien dessous. Ce n'est pas une erreur du template : soit vous lui donnez des pages, soit vous la sortez du méga.
Le réglage
Styles → votre style → onglet Styles → groupe Menu.
Un seul champ : la largeur minimale d'une colonne. Laissé vide, il vaut 16 rem.
Le nombre de colonnes, lui, ne se règle pas : c'est le nombre de rubriques. Une entrée de deuxième niveau donne une colonne, toujours. Le panneau est donc aussi large que la somme de ses colonnes, borné à la largeur du site.
Et cette largeur-là est un plancher, pas une largeur imposée : une colonne dont les intitulés sont plus larges les garde. Sur un menu aux intitulés longs, passer de 12 à 16 rem ne changera donc rien de visible.
Servez-vous-en pour aérer un menu aux intitulés courts.
Le panneau ne déborde jamais. Quand les rubriques sont trop nombreuses pour la largeur de votre site, les colonnes se resserrent pour tenir dans la page : la largeur minimale cède, et les intitulés passent à la ligne. Six rubriques à 16 rem réclameraient 96 rem, soit environ 1536 px : dans un site de 1140 px, elles se partagent la place, sans ascenseur horizontal sous le menu.
La même chose vaut au zoom. À 200 %, la place disponible est divisée par deux : trois rubriques à 16 rem tiennent dans un site de 1140 px à taille normale, et se resserrent à 200 %.
Des colonnes serrées restent dans l'écran, mais elles respirent moins. Le remède est dans le menu, pas dans le réglage : moins de rubriques par panneau, plus de panneaux. Un mega de six colonnes ne se lit de toute façon pas mieux qu'un de trois.
La position du panneau ne se règle pas : il s'aligne sur la largeur de votre page et ne peut pas sortir de l'écran.
L'alignement du texte dans les sous-menus
Dans le Theme Customizer, groupe Menu, le réglage Alignement des sous-menus dit où se place le texte dans les sous-menus et dans le méga-menu : Début (par défaut), Centre ou Fin.
Il est indépendant de l'alignement de la barre de menu. Une barre centrée ne centre plus ses sous-menus : elle peut ouvrir des panneaux alignés au début, qui se parcourent plus facilement des yeux. Si vous aimiez l'ancien rendu, choisissez Centre.
Sur téléphone
Le panneau redevient un accordéon sur une colonne, et tout est plié. Le visiteur ouvre le menu, puis une rubrique, puis un volet : un cran à la fois. Chaque cran est décalé vers la droite, pour qu'on voie à quoi une page appartient.
C'est le même menu : il n'y a rien à régler en plus, et rien à publier deux fois.
Ce que le template fait sans qu'on le lui demande
Le panneau s'ouvre au clic et se referme d'une deuxième pression, par la touche Échap, un cran à la fois, par un clic à côté, ou dès que le clavier en sort.
Deux volets de deux colonnes différentes peuvent rester ouverts en même temps : ils ne se disputent pas la place. En revanche, ouvrir un second méga-menu referme le premier.
Une entrée qui a une page et des enfants porte deux commandes distinctes : son intitulé mène à sa page, le chevron déplie ses enfants. Sa page ne devient donc jamais inatteignable.
Chaque chevron porte un intitulé écrit pour les lecteurs d'écran, Afficher le sous-menu de Vie quotidienne, et l'ordre de tabulation suit exactement l'ordre de lecture : une colonne est finie avant que la suivante commence.
Si le panneau ne s'ouvre pas
Vérifiez dans l'ordre :
Le mot est-il au bon endroit ? Style CSS du lien, onglet Type de liens, sur l'entrée de premier niveau. Un méga posé sur une entrée de sous-menu n'aurait nulle part où s'afficher : il est ignoré.
L'entrée a-t-elle des enfants publiés ? Un panneau vide ne s'ouvre pas.
Le cache est-il vidé ? Après une mise à jour du template, Système → Vider le cache. La feuille de style de chaque style est mise en cache.
À jour pour Corpus 2.1.704.