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.
Cliquez ensuite sur le noeud parent Ecrans et passez en mode graphe.
Ajoutez un bloc Actions Changer d'écran, cliquez ensuite dessus et sélectionner Ecran5 dans les paramètres écran de l'inspecteur de droite.
Supprimer le bloc Switch sélection unique et recréez le : cliquez sur Blocs puis Contrôles puis Switch sélection unique.
Cliquez sur le bloc nouvellement créé, puis dans l'inspecteur de droite, reliez la sélection unique à la variable currentScreen.
Toutes les entrées correspondant aux différents écrans sont créées. Reliez-les aux blocs Changer d'écran correspondants.

Dupliquer un nouvel élément dans la version Mobile :

Dupliquez le noeud Texte Screen4 et renommez-le Ecran5.
Passez en mode graphe, supprimez le bloc définir currentScreen et recréez-le : cliquez sur Blocs puis Variables puis currentScreen.
Cliquez sur le bloc nouvellement créé, puis dans l'inspecteur de droite sélectionnez Ecran5.
Reliez le bloc au bloc définir isMenuOpen.

Vous pouvez ensuite modifier le style de votre nouvel élément pour qu'il soit raccord avec les autres directement dans le mode graphe.

Cliquez sur le bloc Condition. Dans l'inspecteur de droite, modifiez le paramètre test. Remplacez 'Screen 4' par 'Ecran5'.

Créez un élément ex nihilo dans la version Bureau :

(Vous pouvez bien évidemment dupliquer un noeud préexistant, comme dans la version Mobile. L’intétêt ici est de vous montrer comment créer l’élément from scratch.)

Ajoutez un noeud Texte à l'intérieur du noeud Section.
Changez ensuite sa valeur avec le nom d'écran souhaité (ex: Ecran5).
Passez en mode Graphe puis ajoutez un bloc événement "Clique".
Reliez-le au bloc Définir currentScreen, puis cliquez dessus et dans l'inspecteur de droite choisissez l'écran que vous avez créé (Ecran5).

Vous devez ensuite modifier le style de votre nouvel élément pour qu'il soit raccord avec les autres.