Menu Grille Réactif

Le Menu Grille dans Navi+ est conçu avec une approche mobile-first. Cela signifie que vous configurez et optimisez le menu d’abord sur mobile, et la version de bureau va automatiquement s’adapter à partir de la mise en page mobile au lieu d’être reconstruite à partir de zéro.

Les Menus Grille sont généralement utilisés pour mettre en avant des fonctionnalités clés ou des catégories importantes, généralement avec 8 à 12 éléments. Sur mobile, la grille est couramment affichée en 2 à 3 rangées, avec 4 à 5 éléments par rangée. Pour y parvenir, vous pouvez utiliser le paramètre de mise en page de largeur, tel que 3/12 ou 2/10, pour contrôler comment la grille s’adapte sur les écrans plus petits.

Sur bureau, la largeur d’écran disponible est beaucoup plus grande (souvent équivalente à 2–3 écrans mobiles). Si la grille affiche toujours seulement 4–5 éléments par rangée, elle peut sembler trop sparse. Pour résoudre ce problème, Navi+ fournit le paramètre de ratio d’affichage Bureau/mobile. Par exemple, lorsque vous définissez un ratio de 2x, le nombre d’éléments affichés par rangée de bureau sera doublé par rapport à mobile, ce qui donne 8–10 éléments par rangée, créant ainsi une mise en page plus équilibrée sur les grands écrans.

Sur mobile, les Menus Grille peuvent être affichés de deux manières. La première option est en pleine largeur, où la grille remplit toute la largeur de l’écran, rendant les éléments faciles à voir et à toucher. La deuxième option est une grille défilable horizontalement, où les tailles des éléments restent fixes et les utilisateurs peuvent faire glisser vers la gauche ou la droite pour explorer plus de contenu. Les deux options fonctionnent bien sur mobile, et vous pouvez choisir celle qui convient le mieux à votre contenu et à votre cas d’utilisation.

Sur bureau, les gestes de glissement ne sont pas courants, donc le Menu Grille est affiché avec une largeur fixe de 100%. En combinant le ratio d’affichage Bureau/mobile avec des paramètres de taille spécifiques à l’appareil (en utilisant le format 8 16, signifiant 8 sur mobile et 16 sur bureau), vous pouvez vous assurer que la grille a l’air claire, pleine et bien proportionnée sur les écrans plus grands.

Cette approche garde votre Menu Grille cohérent sur mobile et bureau, facile à gérer et simple à mettre à jour—sans maintenir deux systèmes de menu séparés. Vous n’avez besoin de concevoir le Menu Grille qu’une seule fois sur mobile, et Navi+ s’occupe du reste.