[Résolu] (CSS3) Volet Menu Rétractable / Réagir au scroll ?

Bonjour à tous,


Je suis en train de créer mon menu mobile sous forme de volet. Animation de slide latéral en CSS3. Le volet s'ouvre et se ferme au clic sur un bouton.

Je me suis inspiré de ce tuto pour créer un volet en CSS3 : http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html

Ma question : Savez-vous comment je peux obliger le volet à se rétracter si l'utilisateur scroll dans la page (et donc reprend sa navigation) ? Je ne veux pas obliger l'utilisateur à rappuyer sur le bouton pour fermer le volet (pas user friendly). Sinon vous utiliseriez quoi ?

Merci d'avance pour vos avis.
Modifié par Pink_Citrus (29 Jun 2016 - 18:21)

Si si, c'est user friendly. Si l'utilisateur a envie de le fermer, il le ferme.

Avec ton idée, si le menu ferme alors que l'utilisateur a scrollé, il pourrait être surpris par ce comportement car ce n'est pas ce qu'il a demandé / ce à quoi il s'attendait.

Typiquement, il pourrait s'attendre à scroller dans le menu, si jamais ce dernier est plus haut que le viewport…

Éviter de mélanger les interactions est la meilleure façon de respecter les utilisateurs.

Bonjour,


Merci pour ton retour. C'est effectivement une réflexion qui n'est pas dénuée de sens non plus. J'admet être parti de l'assurance que mon menu était petit (site vitrine simple) et du postulat que le scroll dans la page était une volonté de reprendre la navigation initiale.

Je vais réfléchir et surement trouver une meilleure option.

Par curiosité, selon toi, lorsqu'on veut lancer un effet au scroll, c'est Jquery de toute façon ? Je n'ai jamais vu ce type de fonctionnement dans CSS 3. Did you ?


Merci.

Non en effet.

Des brouillons sont en cours dans CSS pour faire ce genre de choses, notamment les scroll snap points mais c'est peu supporté pour le moment.

Les évènements scroll en JS sont bien mieux supportés. Et pas besoin de jQuery a priori, un addEventListener sur l'évènement scroll devrait faire l'affaire, en théorie.

Super,

Merci de l'info précise. Je vais surveiller cette partie de CSS3 pour la suite. Et viser le JS maintenant.

A bientôt ! Résolu pour moi
Modifié par Pink_Citrus (30 Jun 2016 - 12:57)