Menus mobiles
Choisissez parmi quatre styles de menu mobile distincts et définissez précisément le comportement de votre navigation sur petit écran — le tout sans toucher au CSS ni au JavaScript.
Définir le point de rupture
Le point de rupture (breakpoint) est la largeur de fenêtre en dessous de laquelle le menu de bureau est masqué et le menu mobile apparaît. Définissez-le dans Menu Builder → Mobile.
La valeur par défaut est de 768 px (limite standard entre tablette et mobile). Saisissez la valeur en pixels qui convient à votre mise en page, ou choisissez Auto pour laisser l’extension détecter dynamiquement l’espace disponible.
Les styles de menu mobile
1. Menu déroulant Par défaut
Le style le plus courant. Les éléments de menu s’empilent verticalement dans un panneau déroulant classique, juste sous la barre de menu. Les sous-éléments sont indentés sous leur parent.
- Familier et compris de tous
- Convient bien aux menus comportant de nombreux éléments
- Idéal pour : blogs, sites d’entreprise, portfolios
2. Plein écran
Les éléments de menu sont centrés sur une superposition en plein écran qui couvre toute la fenêtre. Grande typographie, beaucoup d’espace pour respirer.
- Effet spectaculaire et moderne
- Idéal pour les sites comptant au maximum 5 à 8 éléments de premier niveau
- Idéal pour : agences, photographes, pages d’atterrissage
3. Panneau coulissant — Gauche
Un panneau se glisse depuis le bord gauche de l’écran et recouvre en partie le contenu de la page. Le reste de la page s’assombrit mais reste partiellement visible.
- Familier des applications mobiles (par exemple Gmail, Google Maps)
- Convient aux hiérarchies de navigation profondes
- Idéal pour : e-commerce, portails, sites de documentation
4. Panneau coulissant — Droite
Identique au panneau coulissant à gauche, mais il se glisse depuis le bord droit. Utile lorsque votre bouton hamburger se trouve à droite de la barre et qu’un panneau aligné à gauche paraîtrait contre-intuitif.
Basculez d’un style à l’autre dans Menu Builder → Mobile. Le changement prend effet immédiatement — inutile de republier votre menu.
Bouton hamburger
Le bouton hamburger (☰) est la commande qui ouvre et ferme le menu mobile. Configurez-le dans la section Menu Builder → Mobile :
| Option | Description |
|---|---|
| Style d’icône | Classique (3 traits), Moderne (arrondi) ou Minimal (fin). |
| Alignement | À gauche, au centre ou à droite de la barre de navigation mobile. |
| Couleur de l’icône | Indépendante de la couleur des éléments de menu. |
| Arrière-plan du bouton | Couleur d’arrière-plan facultative derrière l’icône hamburger. L’extension impose un fond transparent par défaut afin que les styles de bouton de votre thème ne transparaissent pas. |
Couleurs des liens mobiles
Vous pouvez attribuer aux liens du menu mobile leurs propres couleurs, totalement indépendantes de celles du menu de bureau. Vous trouverez trois sélecteurs de couleur dédiés dans Style → Hamburger → Texte des liens mobiles :
- Normal — couleur par défaut des liens dans le menu mobile
- Survol — couleur lorsque le lien est touché ou survolé
- Actif — couleur de l’élément actuellement actif
Laissez un champ vide pour hériter des couleurs du menu de bureau.
Comportement des sous-menus sur mobile
Lorsqu’un élément de menu possède des sous-éléments, vous pouvez contrôler la façon dont ils se déploient sur mobile grâce à l’option accordéon :
- Accordéon activé — un seul sous-menu peut être ouvert à la fois. En ouvrir un referme automatiquement les autres. Recommandé pour les longs menus.
- Accordéon désactivé (par défaut) — plusieurs sous-menus peuvent rester déployés en même temps.
Réglez ceci dans la section Menu Builder → Mobile.
Méga-menus sur mobile
Lorsqu’un élément de premier niveau a un méga-menu activé, le toucher sur mobile fait glisser un panneau dédié en plein écran n’affichant que ces liens — avec un bouton ← de retour en haut. La navigation gagne ainsi une sensation d’application native (semblable aux grands sites de vente au détail) tout en gardant la liste claire et lisible.
Vous pouvez contrôler le comportement mobile du méga-menu élément par élément depuis le panneau ⚡ Méga-menu :
- Visible sur mobile — la navigation par poussée (push-screen) par défaut décrite ci-dessus.
- Masqué sur mobile — le méga-panneau n’est pas rendu sur les petits écrans ; les sous-éléments sont entièrement masqués.
Sur mobile, les personnalisations d’apparence propres à chaque méga-menu (arrière-plan, couleurs, polices) sont automatiquement neutralisées afin que les liens s’affichent toujours avec le même style neutre que le reste du menu mobile — ce qui évite les combinaisons de couleurs incohérentes héritées des préréglages de bureau.
Aperçu téléphone en direct
Tant que vous êtes dans l’onglet Mobile du panneau d’administration, une maquette de téléphone épinglée sur le côté droit de l’écran se met à jour en temps réel à chaque modification d’un réglage mobile — style d’ouverture, couleur de la superposition, alignement du hamburger, couleur des liens, largeur du panneau, et bien plus. Aucun enregistrement n’est nécessaire pour en voir l’effet.
L’extension respecte automatiquement la media query CSS prefers-reduced-motion. Si le visiteur a activé « Réduire les animations » dans les réglages d’accessibilité de son système d’exploitation, toutes les animations sont désactivées, quel que soit le réglage ci-dessus.