Problème menu sur passage souris

[Scuba070]

Et pour le code cité plus haut

$("#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");
    });

J'avais déjà remarqué que celui de l'apparition est identique à celui de la disparition.....

Un expert en javascript peut-il nous éclairer la dessus ?

[pmleconte]

Pour l'instant, n'y touchez pas, il permet de cacher tous les sous-menus, puis d'afficher celui sur lequel la souris est positionné.

Pascal

[Scuba070]

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

J'ai déjà testé en désactivant le cache du système, ça n'a rien changé. De plus, le cache du module menu est configuré en OFF

Dans mon 1er message, j'avais signalé que la page mettait un peu de temps à charger (pourtant, j'ai la fibre ).
Pascal

C'est bizarre car le site est vraiment optimisé, hébergé sur un serveur rapide et avec le cache activé... Tous les sites de test montre que le site est très rapide....

Ou alors vous êtes venu juste après que j'ai vidé le cache !

Pouvez-vous me dire ce qu'il en est maintenant ? (je ne touche plus au cache en attendant votre réponse)

[Scuba070]

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

L'erreur est humaine.... Surtout le samedi matin

Je viens de tester, le menu fonctionne mais le problème est toujours présent...

J'ai mis le code avant les lignes de chargement du menu (avant ligne 52), puis après (après ligne 65). Résultat identique...

[pmleconte]

Le système semble bien répondre aujourd'hui.

[pmleconte]

L'erreur est humaine.... Surtout le samedi matin

Je viens de tester, le menu fonctionne mais le problème est toujours présent...

J'ai mis le code avant les lignes de chargement du menu (avant ligne 52), puis après (après ligne 65). Résultat identique...

Je ne vois pas le nouveau code dans votre javascript.

[Scuba070]

Je ne vois pas le nouveau code dans votre javascript.

Ah non, je viens de le supprimer... Je test et si ça marche pas j'enlève... J'ai peur sinon d'oublier des bouts de code part-ci part-là...

Il faut que je le remette ?

Edit : Etant donné que l'ajout de ce bout de code ne bloque pas le site, je l'ai remis car je dois partir ce matin :

$("#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");
    });    

});

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

[pmleconte]

Décidément, mon café a été long à faire effet. Il ne s'agit pas de la classe drop-menu, mais, dropdown-menu.

Donc, cela devient :

$("#top-menu .nav .dropdown-menu").attr('style', 'display: none');

Naturellement, il faut vérifier que cela ne provoque pas d'effet de bord car la classe dropdown-menu est aussi appelée dans les sous-menus des sous-menus.

Mais, sauf erreur, c'est forcé par la ligne 385 du css qui contient :

#top-menu .nav > .dropdown > .dropdown-menu > .dropdown > .dropdown-menu {display: block;
}

A tester,

Pascal

[Scuba070]

Décidément, mon café a été long à faire effet. Il ne s'agit pas de la classe drop-menu, mais, dropdown-menu.

Donc, cela devient :

$("#top-menu .nav .dropdown-menu").attr('style', 'display: none');

Naturellement, il faut vérifier que cela ne provoque pas d'effet de bord car la classe dropdown-menu est aussi appelée dans les sous-menus des sous-menus.

Mais, sauf erreur, c'est forcé par la ligne 385 du css qui contient :

#top-menu .nav > .dropdown > .dropdown-menu > .dropdown > .dropdown-menu {display: block;
}

A tester,

Pascal

Et ben figurez-vous que j'avais vu ça, mais j'osais pas le dire vu mon niveau de javascript......

Je viens de tester, cette modif empêche le deuxième sous-menu latéral de s'ouvrir... Et en bougeant un peu dans les pages, le problème continu malgré tout... Ce n'est donc pas ici qu'il faut chercher je pense...

Pour info j'ai mis le bout de code à la fin du script. Est-ce bon ? :

jQuery(function($) {    

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

$('#navbar-top ul.menu > li.deeper > a').attr('data-toggle', 'dropdown');

$('#navbar-top ul.menu > li > a.dropdown-toggle').attr('href', '#');

$( '#navbar-top ul.menu > li.deeper > ul.dropdown-menu > li.deeper > a.dropdown-toggle > span.caret' ).remove();

$('.pagination > ul').addClass('pagination');

$( 'ul.menu > li.deeper > ul.dropdown-menu > li.deeper > ul.dropdown-menu' ).addClass( 'sub-menu' );

$( 'ul.menu > li.deeper > ul.dropdown-menu > li.deeper > ul.dropdown-menu > li.deeper > ul.dropdown-menu' ).removeClass( 'dropdown-menu' );

$( 'ul.menu > li.deeper > ul.dropdown-menu > li.deeper > ul.dropdown-menu > li.deeper > a.dropdown-toggle > span.caret' ).remove();

$('#compo .blog > .cat-children > ul > li:nth-child(odd)').addClass('col-sm-5');

$('#compo .blog > .cat-children > ul > li:nth-child(even)').addClass('col-sm-5 col-sm-offset-2');


$( '#navbar-top ul.menu' ).addClass( 'navbar-nav' );

$( '#top-menu ul.menu' ).addClass( 'nav-pills nav-justified' );

$( '#sous-compo > div.moduletable > h3' ).addClass( 'col-lg-12' );    


$( '.ce-container .ce-button-submit' ).addClass( 'btn btn-primary btn-sm' );    

$( '.ce-container .ce-button-reset' ).addClass( 'btn btn-danger btn-sm' );

$( '#diapo-produit #slider > div' ).addClass( 'col-lg-6' );

$( '#diapo-produit #slider > ol' ).addClass( 'col-lg-6' );

$( '#compo .blog .cat-children > ul > li' ).addClass( 'clearfix' );


$("#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");
    });    

});

$( '#top-menu .nav > li.dropdown > ul > li > ul' ).hover(function(){
    //console.log('sous-menu couleur blanc');
    $(this).parent().find(' > a').attr('style', 'color: #fff');
}, function(){
    //console.log('sous-menu couleur gris');
    $(this).parent().find(' > a').attr('style', 'color: #ccc');    
});

$( '#top-menu .nav > li.dropdown > ul > li > ul > li > ul' ).hover(function(){
    //console.log('sous-sous-menu couleur blanc');
    $(this).parent().find(' > a').attr('style', 'color: #fff');
}, function(){
    //console.log('sous-sous-menu couleur gris');
    $(this).parent().find(' > a').attr('style', 'color: #ccc');    
});

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

});

[Scuba070]

#top-menu .nav > .dropdown > .dropdown-menu > .dropdown > .dropdown-menu {display: block;
}

Le problème est situé au sous-menu

Au risque de dire une bêtise, ce bout de code ne parle t'il pas du sous-sous-menu ?

[Eddy.vh]

Mon niveau de JavaScript est aussi au ras des pâquerettes (et faut pas qu'elles soient trop grandes !) mais ne faudrait-i pas une inversion dans la seconde partie de ce 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", "visible").parent().parent().slideToggle(0, function() {
        $("> li > a", this).css("visibility", "hidden");     });

[Scuba070]

J'ai cherché un peu sur les forum anglophones.

J'ai trouvé peut être quelques chose d'intéressant :

$('body').on('mouseenter mouseleave','.dropdown',function(e){
  var _d=$(e.target).closest('.dropdown');
  if (e.type === 'mouseenter')_d.addClass('show');
  setTimeout(function(){
    _d.toggleClass('show', _d.is(':hover'));
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
  },300);
});

(lien article original : https://stackoverflow.com/questions/...ap-v4/42183824)

Il utilise la fonction "mouseenter mouseleave" pour faire apparaître/disparaître le menu avec la souris.

Est-ce compliqué de ré-écrire le code de la ligne 52 à 65 sur la base de cette solution ?

Sinon une autre solution est proposé avec l'ajout d'un code CSS :

.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

Un peu compliqué tout ça pour moi.......

Mais je suis sûr on va y arriver !