Menu ▶️ | Notion

Ce template Menu vous permet de découvrir comment gérer un menu sur votre site web (sous la forme d'une liste horizontale dans la version Bureau) qui va se transformer en Burger menu dans la version Mobile (une icone en haut à gauche qui quand on clique dessus ouvre un menu en liste verticale sur un côté de l'écran).

Vous verrez comment intégrer de nouveaux éléments à ce Burger Menu en les créant ex nihilo dans la version Bureau ou bien en les créant en dupliquant des noeuds préexistants dans la version Mobile.

⚠️ Avant de commencer pensez à passer régulièrement en mode Aperçu pour tester vos noeuds afin de vérifier que toutes vos modifications ont bien été prises en compte et fonctionnent correctement. ⚠️

Composition du template :

Différents noeuds Ecran qui correspondront aux pages dans votre menu.
2 noeuds Taille d'Ecran, l'un configuré pour la version Bureau (ordinateur) l'autre pour la version Mobile.

La version Bureau :

Le noeud Taille d'ecran contient :

un noeud Section horizontale avec le contenu.

La version Mobile :

Le noeud Taille d'ecran contient :

un noeud Icône qui représente le Burger Menu.
un noeud Fenêtre Modulaire qui s'ouvre avec le contenu.

Comment rajouter un élément dans ces Menus?

Pour rajouter un élément dans ces Menus plusieurs étapes sont nécessaires : il faut créer un nouvel écran pour chaque nouvel élément que vous créerez en parallèle dans la version Mobile, et dans la version Bureau. Vous pouvez ajouter des éléments en dupliquant des noeuds préexistants (cf. version Mobile) ou bien en créant de nouveaux noeuds (cf. version Bureau).

Commencez par créer un nouvel ecran :

Ajoutez un noeud Ecran (ex: Ecran5) dans le noeud Ecrans parent.
Pour vous repérez dans cet exemple, vous pouvez ajouter un noeud Texte dans Ecran5 et écrivez "Ecran5" par exemple**.**
Cliquez sur Variables, puis currentScreen. Dans le volet droit, cliquez sur Ajouter et nommez la variable Ecran5.