On va te montrer comment il est facile de régler un problème d’UX design sur un menu réalisé sur Webflow en utilisant du custom code jQuery.

‍

Après avoir lu cet article, vous serez en mesure d’utiliser du JQuery pour améliorer vos menus.

‍

‍Chez Viby on en utilise très souvent et vous allez voir que c’est pas obligatoire de savoir coder !

‍

Amélioration 1

Premièrement quand on ouvre un menu, il est préférable de ne pas pouvoir scroller à travers votre page car cela distrait vos utilisateurs. L’objectif est de garder l’attention de vos utilisateurs sur le menu en question.

‍

Comment régler ce problème ??

Si vous sélectionnez “le body” est que vous définissez l’overflow en mode “hidden” alors vous ne pouvez plus scroller sur votre page du tout ! Mais nous ce n’est pas exactement ce que l’on veut à vrai dire !

Nous voulons à l’ouverture du menu qu’il soit impossible de scroller, et à la fermeture qu’on puisse naviguer normalement à nouveau.

‍

Vous allez donc copier du custom code dans le body tag de votre page

‍

‍

Vous trouverez le custom code ici

‍

Vous renommer: '.trigger’ par le nom de classe de l’élément qui ouvre votre menu.

‍

Veiller toujours à garder les guillemets entre vos classes avec un point au début.

• ”.votreclasse”

‍

Pour vérifier si votre code fonctionne publier votre site, et le tour est joué, comme vous pouvez le constater sur votre site live, lorsque vous ouvrez votre menu il vous est impossible de scroller et lorsque vous le refermer vous pouvez à nouveau !

‍

‍

Petites explications

Pour mieux comprendre comment fonctionne le code que vous avez ajouté dans votre balise </body> c’est très simple !

‍

Vous avez simplement indiqué qu’au premier clic sur l’élément qui ouvre votre menu, l’overflow du “body” passera en “hidden” et qu’au second clic il repassera en automatique. Tout simplement.

‍

Amélioration 2

Ajouter la possibilité de cliquer n’importe où à coté de votre menu pour le fermer.

‍

Lien du custom code ici

‍