Problème d'affichage popover sur Narbar avec JQuery Résolu/Fermé

Question

Bonjour, J'ai créer une navbar avec différent menus à chaque survole des items du menu j'ai un petit popover qui apparaît avec une liste mon problème étant que au survole mon popover s'affiche et sortie du focus de l'items, s'en pouvoir rentrer dans le popover, il disparaît. J'ai réussis à résoudre se problème au survole désormais le popover reste active et je peux y rentrer et lorsque que je sors du popover celui ci se ferme bien mais mon problème c'est que mntn quand mon popover s'ouvre et que je n'entre pas dedans bah il reste afficher, il attend de moi que je repasse dedans et ressortir pour qu'il puisse le refermer. J'aimerais qu'il se ferme même si je n'entre pas dans le popover sans pour autant que cela me bloque dans le sens ou dès le départ quand je passe sur mon items du menu il ne reste pas afficher pour que je puisse entrer dedans. ps: avec mon script jquery le 'show' me fais perdre l'effet css j'espère avoir étais compréhensible, n'hésitez pas à me le dire si vous n'avez pas compris des choses. merci.

.nav-Lorem { display: flex; justify-content: center; background-color: #333333; padding: 13px; text-align: end; } .contenu-Lorem { position: absolute; background-color: gainsboro; transform: translateX(-30%); transition: all 0.3s linear; /* l'effet que je perds avec 'show()' */ margin-top: 13px; border-radius: 2%; box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 20px; } $(document).ready(function(){ $('.contenu-Lorem').hide(); $('.cat-Lorem').hover(function(){ $('.contenu-Lorem').show(); }); $('.contenu-Lorem').mouseenter(function(){ $(this).show(); }) $('.contenu-Lorem').mouseleave(function(){ $(this).hide(); }) Configuration: Windows / Chrome 92.0.4515.159

Pitet · Answer

Bonjour,

Le problème vient du fait que les fonctions jQuery show() et hide() modifie la propriétés css display sur l'élément ciblé pour le faire apparaitre ou le masquer. Or les transitions css ne s'appliquent pas sur la propriété display.
On peut utiliser la propriété visibility à la place ou jouer avec d'autres propriétés selon l'effet qu'on veut appliquer (height, opacity, etc...).

L'affichage de sous-menu se gère habituellement directement en css, pas besoin de javascript.
On peut utiliser la pseudo-classe :hover pour appliquer un style css au survol d'un élément.

Par exemple :

.nav-Lorem {
  display: flex;
  justify-content: center;
  background-color: #333333;
  padding: 13px;
  text-align: end;
}

.contenu-Lorem {
  visibility: hidden; /* par défaut le sous menu n'est pas visible */
  position: absolute;
  background-color: gainsboro;
  margin-top: 13px;
  border-radius: 2%;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 20px;
}

/* le style appliqué à l'élément .contenu-Lorem au survol de l'élément parent .nav-Lorem */
.nav-Lorem:hover .contenu-Lorem  {
  visibility: visible;
  transform: translateX(-30%);
  transition: all 0.3s linear;
}

rdbn · Answer

Bonsoir, 
j'ai bien compris pour les fonctions JQuery,
et pour le faite d'utiliser JQuery c'est parceque je vais devoir appeler via ajax, de ma bdd, les catégories et les sous-catégories correspondantes il n'y en à qu'une ici pour l'exemple mais il y en a plusieurs en réalité. Et pour l'instant c'est codé en dur.

Et en effet avec css je connaissais déjà cette fonction mais là je veux appelé mes catégories et sous-catégories via JQuery/Ajax. 
depuis j'ai avancé en utilisant une ceci 

j'ai mis directement l'opacity:0 pour le contenu-Lorem

puis j'ai rajouter un contenu-Lorem.active avec l'opacity:1;

dans jQuery j'ai utiliser la fonction toogleClass pour pouvoir garder mon effet et activer le .active sur css mais je n'arrive pas à garder le popover ouvert ..

$(".cat-Lorem").click(function(){
            $(this).toggleClass("active");
            $(".contenu-Lorem").toggleClass("active");
        })


j'ai également utilisé sur une autre catégorie pas le hover mais le click un peu plus simple.. 
prenez la catégorie déjà existante elle sont idem..

$(".cat-Lorem").click(function(){
            $(this).toggleClass("active");
            $(".contenu-Lorem").toggleClass("active");
        })


je clique le menu s'affiche bien les effets sont présent je navigue dessus mais pour fermer le menu comme le .click et attribué au cat-Lorem c qu'avec lui que je peux fermer le popover. j'aimerais donc le refermer avec un click n'importe ou sur la page en dehors de la popover

Pitet · Answer

En relisant mon premier message, je me rends compte que la pseudo-classe :hover (ou la classe .active appliquée en js) devrait plutôt être appliquée sur le parent .cat-popover au lieu de .nav-Lorem pour que chaque catégorie affiche son propre sous-menu (il faut du coup supprimer le padding sur .nav-Lorem et l'appliquer sur .cat-popover).

Avec la peudo-classe :hover en css : https://jsfiddle.net/euo2tv1h/
Avec la classe .active appliquée en js : https://jsfiddle.net/euo2tv1h/1/

Si tu veux utiliser un clic sur le .cat-Lorem pour afficher le sous-menu, il faut plutôt utiliser l'évènement focus pour fermer le sous-menu lorsqu'on clique n'importe où dans la page (le focus de .cat-Lorem est alors perdu) et utiliser l'opérateur + dans le sélecteur css pour appliquer le style sur l'élément voisin.

Avec la pseudo-classe :focus en css : https://jsfiddle.net/euo2tv1h/2/
Avec la classe .active appliquée en js : https://jsfiddle.net/euo2tv1h/3/

Problème d'affichage popover sur Narbar avec JQuery

3 réponses

Discussions similaires