Bonjour à toutes et tous,

J'essaie de faire un menu responsive pour le site de ma boîte mais je rencontre un léger bug et je ne vois pas d'où il peut venir. Je vais essayer de vous l'expliquer mais pas forcément évident, il vaut mieux le tester en direct ici : https://codepen.io/eyneva/pen/BErOLB?editors=0100

Le menu "large" est horizontal avec 6 onglets. Au survol, des sous-onglets se déroulent en dessous, bref classique et jusque là, tout va bien, le menu correspond à mes souhaits.

Quand je passe en dessous des 800px, les onglets disparaissent pour ne laisser place qu'au mot MENU dans la barre, MENU devenant déroulant verticalement au clic avec un simple flex-direction:colum. Les 6 onglets apparaissent donc et quand je passe la souris sur un onglet, les sous-onglets se déroulent. 

Mais c'est là que j'ai un problème : passé le 3ème onglet (IMPRESSION --> COURRIER EGRENE), le menu revient aux 6 onglets principaux et ne reste plus déroulé. Idem en testant au doigt sur mobile directement, passé ce 3ème onglet, quand j'appuie, c'est comme si je cliquais 2 fois très vite, sur l'onglet choisi et le ss-onglet qui apparait au même endroit

Je ne sais pas si c'est très clair tout ça :

En gros, je passe sur l'onglet n°1, les ss-onglets apparaissent. Je passe au dessus et va sur onglet n°2, les ss-onglets apparaissent, idem pour onglet n°3 mais quand j'arrive en bas des ss-onglets de cet onglet n°3, je ne peux pas passer sur l'onglet n°4 car le menu se referme, comme si je sortais de d'une zone mais laquelle ?

Par contre, si je prends le menu à partir du bas, pas de soucis, je peux dérouler un à un tous les onglets.

D'avance un grand merci à toutes celles et ceux qui me viendront en aide. Et soyez indulgents sur le code, je débute, d'ailleurs, si vous avez des remarques pour l'améliorer en plus de résoudre l'erreur, elles seront les bienvenues

Bien cdt

La problématique que je semble comprendre vise surtout la version PC lorsque c'est en dessous de 800px. La "problématique" c'est que ton menu devient plus grand que sa taille total, et que si tu sors par le bas, il se ferme et ta souris est en dehors du menu donc tout semble se fermer de manière pas très jolie ?

Sinon pour l'utilisation mobile, ça semble fonctionnel. Si on ouvre un menu qui prend toute la hauteur, suffit de scroll avec le doigt, donc tout semble bien aller.

Je serais intéressé que tu précises peut-être davantage ta demande.

Bonjour,

Je n'ai pas eu de notifications m'indiquant vos réponses que je viens de voir à l'instant, désolé et merci de vous intéresser à mon problème. Je vais surveiller plus souvent du coup !

Visiblement, je n'arrive pas à expliquer mon problème car dans le doute, je viens de tester sur le lien mis au 1er post et le problème est bien réel

Je vais essayer de le réexpliquer : sur le menu déroulant inférieur à 800px, si on attaque le menu par le bas, on peut bien dérouler tous les menus et sous menus.Par contre, si on attaque par le haut, la souris passe sur le 1er menu ACCUEIL, les ss-menus apparaissent bien, idem sur les 2ème et 3ème menus (MAILING et IMPRESSION) par contre, quand on arrive sur le dernier ss-menu Enveloppe personnalisée du menu IMPRESSION et qu'on veut  passer sur COURRIER EGRENE, le menu se referme, comme si effectivement on en sortait. On est obligé d'y accéder en remontant par le bas sinon, impossible de dérouler les 3 derniers menus.

Et 2ème problème, en testant sur mobile, quand je clique sur un menu pour le dérouler, il ouvre direct le lien du ss menu, comme si on cliquait 2 fois très vite et là, je n'ai aucune idée de où cela pourrait provenir.

D'avance merci pour vos retours, en espérant que vous pourrez constater les problèmes

-
Edité par ThomasBomy 4 juin 2019 à 12:08:14

Salut,

pour ton premier problème Hatsukoi t'a expliqué le problème.
Ton sous menu courrier se referme et donc ton menu reprends sa hauteur initiale et ta souris est en dehors et ne survole pas ton lien emailing.
Pour résoudre ce problème je mettrait un timer (en css ou js) sur la fermeture des sous menus. Ce qui ferait que le sous menu que tu quittes mettrait suffisamment de temps à se refermer pour pouvoir survoler le lien de menu suivant.

Pour ton deuxième problème la solution est en JS.
Un hover n'existe pas sur mobile, c'est direct le clic. Donc normal que tes liens avec un # n'ouvre pas les sous-menu.
Tu devrait t'en sortir avec un peu de Javascript, avec l'aide de Jquery, pour empêcher le lien de fonctionner normalement et qu'il ouvre les sous-menus.

PS : j'avais fait un menu comme ça il y a longtemps : http://www.frogweb.fr/menu-deroulant-vertical/#menu-accordeon

Mais ce genre de menu c'est vraiment tout sauf ergonomique. C'est même assez désagréable à utiliser.

-
Edité par Frogweb 30 juillet 2019 à 13:13:43

Donc, pour le 1er problème, le fait qu'on "sorte" du menu est normal ? Il n'y a pas d'autres possibilités qu'un timer ? Comment font les autres sites pour avoir de "hauts" menus déroulants ?

Et pour le 2ème point, ok, je vais regarder ce que je peux faire

Quant à la remarque sur l'ergonomie, que conseillerez-vous de faire plutôt du coup ?

Merci beaucoup en tout cas