Problème menu sur passage souris

[Scuba070]

Bonjours à tous

J'ai déjà appel à l'aide sur ce forum et j'ai réussi à solutionner mes précédents problèmes. Alors je retente encore une fois !

Un petit rappel rapide : J'ai un site qui était sous joomla 2.5 et suite à plusieurs piratages j'ai pris la décision de le migrer vers la dernière version. Non sans mal, j'y suis arrivé et le site fonctionne très bien désormais. Je l'ai fait seul car le prestataire qui m'avait réalisé le site à l'époque ne travaille plus avec Joomla et à refuser de me faire la migration. Voilà le résumé.

Aujourd'hui, j'ai un dernier problème à régler. A vrai dire ce problème est apparu dès l'origine et n'a jamais été solutionné.

Mon site dispose d'un menu responsive fait avec bootstrap. Il marche très bien à l'exception d'un problème du survol de la souris. Très régulièrement, le menu se déroule sans action de survol et se met à fonctionner à l'envers : Dès qu'on présente la souris sur le sous-menu déroulé (alors qu'il ne le devrait pas), hop il disparaît. Pire, des fois il se met a clignoter (apparaître/disparaître très vite). Il est donc impossible de naviguer sans le menu correctement. C'est très gênant.

J'ai cherché sur le net, mais je n'ai rien trouvé à ce sujet.

Voici mon site : www.aggeris-protection.com

Baladez-vous un peu dans les pages, vous arriverez vite à rencontrer le problème...

J'ai essayé de migrer sous la dernière version de bootstrap, j'ai aussi mis à jours jquery mais sans succès.

Pouvez-vous m'aider ?

D'avance, merci

[pmleconte]

Bonjour,

Je viens d'essayer avec plusieurs navigateurs (chrome, edge, firefox) et je n'ai pas constaté de problème particulier. Juste, lorsque l'on appelle le site, le CSS met un peu de temps à charger, donc, votre menu n'est pas très beau. Mais, dès que tout est chargé, le comportement me semble correct.

Pascal

[Scuba070]

Bonsoir Pascal

Merci d'avoir pris un peu de temps pour mon problème.

Et justement, ce problème est qu'il est complètement aléatoire. Parfois ça le fait, parfois non. Certaines fois c'est au bout de plusieurs pages visitées, et d'autres fois immédiatement au chargement du site. Et peu importe le navigateur. Sur mobile pas de soucis, le menu est présenté différemment.

J'ai fais une petite vidéo pour vous montrer quel est le problème : https://youtu.be/y1mXewChF2U (lien privé)

Je montre aussi la console de chrome, je sais pas si ça peut aider... L'élément de style reste sur "block" au lieu de "none"

Edit : je joins le fichier style-compact.css dans un zip, je pense que cela peut-être utile.
A noter que j'ai regroupé dans ce fichier toutes les feuilles de style car quand j'ai repris la main sur mon site l'affichage était très lent... Avec l'aide de plusieurs forum/tuto j'ai décidé de tout regroupé en un seul et ça va beaucoup mieux maintenant... Je ne sais pas si c'est bien, à vous de me le dire...

[Eddy.vh]

Bonjour.

J'ai en effet constaté le problème en navigant, c'est assez aléatoire et étrange.

En regardant le code source, tu as le chargement du fichier /templates/aggeris/css/style-compact. css dans le body, le chargement des css doit se faire dans la balise head.
Je n'en suis pas certain mais il se peut que le problème puisse venir de là.

Commence par corriger ça et vérifie si le comportement change.

PS : Très joli site bien agencé, il me plait bien.

[Scuba070]

En regardant le code source, tu as le chargement du fichier /templates/aggeris/css/style-compact. css dans le body, le chargement des css doit se faire dans la balise head.
Je n'en suis pas certain mais il se peut que le problème puisse venir de là.
Commence par corriger ça et vérifie si le comportement change.

Voilà c'est fait. J'ai aussi purgé le cache du site. Cela n'a malheureusement pas corrigé le problème.... Ça aurait été trop simple

PS : Très joli site bien agencé, il me plait bien.

Merci !
Beaucoup d'heure de travail pour arriver à en faire quelques choses de propre.... Et ce n'est pas fini !

[Eddy.vh]

C'est étrange en effet, le menu travaille parfois à sens contraire, c'est à se demander ce qui provoque ça…

[Scuba070]

J'ai passé ma journée à chercher... J'ai bidouillé un peu tout ce que je pouvait, sans succès...

Personne n'a d'idée ?

[woluweb]

Il y a le cache ds Config Générale... mais testez aussi de désactiver tous les plugins de Cache....

[pmleconte]

Bonjour,

Après quelques tests complémentaires, j'ai fini par reproduire le problème. Par contre, je n'ai effectivement pas trouvé de séquences logiques pour le reproduire.

J'ai juste constaté que, lorsque le problème survient, un des sous-menus apparaissait visible à l'appel de la page alors qu'ils sont supposés tous fermés. Cela provoque un problème dans votre javascript (lignes 52 à 65).

Dans mon 1er message, j'avais signalé que la page mettait un peu de temps à charger (pourtant, j'ai la fibre ). Vous devriez essayer d'ajouter un .ready à votre commande en ligne 11. Le fichier js dont je parle est le fichier javascript-compact.js.

Pascal

[Eddy.vh]

Il semble que l'action :hover du menu soit déclenché par un javascript.

Je n'en suis pas certain et un expert javascript pourra mieux commenter mais n'y aurait-til pas une coquille dans cette partie de code ?

$("#top-menu .nav > li.dropdown").hover(function(){
//console.log('sous-menu apparait');
$("> .dropdown-menu > li > a", this).css("visibility", "hidden").parent().parent().slideToggle(0, function() {
$("> li > a", this).css("visibility", "visible");
});


}, function(){
//console.log('sous-menu disparait');
$("> .dropdown-menu > li > a", this).css("visibility", "hidden").parent().parent().slideToggle(0, function() {
$("> li > a", this).css("visibility", "visible");
});

Ce sont les lignes de 52 à 63 comme le mentionne peu avant moi Pascal.

Ouppps, y a eu un doublon…

[pmleconte]

En arrivant sur ma page (quand j'ai le problème), j'ai actuellement ul associé à "Accès véhicule" qui contient style="display:block" alors que la souris est complètement ailleurs. Donc, dès que la souris arrive, cela devient "display:none" et tout est désynchronisé.



Pascal

[pmleconte]

Ce sont les lignes de 52 à 63 comme le mentionne peu avant moi Pascal.

Ouppps, y a eu un doublon…

Le script est désynchro, par contre, nous, c'est presque bon : le temps d'écrire mon message, tu avais déjà envoyé le tien et réciproquement

Pascal

[pmleconte]

Un petit $("#top-menu .nav .drop-menu).attr('style', 'display: none'); en début de script peut résoudre votre problème.

A tester naturellement,

Pascal

PS: à propos du ready, oubliez le car votre syntaxe est équivalente https://api.jquery.com/ready/

[Scuba070]

Un petit $("#top-menu .nav .drop-menu).attr('style', 'display: none'); en début de script peut résoudre votre problème.

Je viens de tester. Je ne suis pas expert en javascript, alors je l'ai mis là

jQuery(function($) {    

[B]$([/B]"[B]#top-menu .nav .drop-menu).attr('style', 'display: none');[/B]

$( 'ul.menu li.deeper > a' ).addClass( 'dropdown-toggle' );
[...]

Ça n'a pas marché (voir résultat en image)

J'ai testé aussi en modifiant le " en ' comme les autres lignes :

$([B][U]'[/U][/B]#top-menu .nav .drop-menu).attr('style', 'display: none');

Même résultat.

Si j'ai mal fait, j'ai mis le javascript-compact.js en copie de ce post

PS : Bravo pour le doublon, vous au moins vous êtes synchro.... Pas comme le menu de mon site

[pmleconte]

Bonjour,

Il manque un " dans la commande. Cela devrait être $("#top-menu .nav .drop-menu").attr('style', 'display: none');

Pas assez de café, ce matin

Pascal