Sujet Précédent Sujet Suivant

Problème d'affichage popover sur Narbar avec JQuery

Résolu/Fermé
rdbn Messages postés 95 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 26 décembre 2022 - 21 août 2021 à 14:36
 YoMan - 26 août 2021 à 05:50
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. 

<div class="nav-Lorem">
      <div class="cat-popover">
            <a href="#" class="cat-Lorem">Lorem</a>
            <div class="contenu-Lorem">
                <ul class="texte-popover">
                    <li class="line-height"><a href="#">Lorem</a></li>
                    <li class="line-height"><a href="#">Lorem</a></li>
                    <li class="line-height"><a href="#">Lorem</a></li>
                    <li class="line-height"><a href="#">Lorem</a></li>
                    <li class="line-height"><a href="#">Lorem</a></li>
                    <li class="line-height"><a href="#">Lorem</a></li>   
                </ul>
            </div>
        </div>
</div>  




.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
A voir également:

3 réponses

Réponse 1 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié le 21 août 2021 à 18:56
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;
}
0
Réponse 2 / 3
rdbn Messages postés 95 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 26 décembre 2022
Modifié le 21 août 2021 à 21:44
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
0
rdbn Messages postés 95 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 26 décembre 2022
Modifié le 24 août 2021 à 19:36
Personne pour une explication svp merci
0
Réponse 3 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
25 août 2021 à 11:58
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/
0
rdbn Messages postés 95 Date d'inscription samedi 3 avril 2021 Statut Membre Dernière intervention 26 décembre 2022
25 août 2021 à 12:54
Merci beaucoup c'est très claire comme explication.
Je vois mes erreurs et comment les corrigées,
le pourquoi du comment, de plus avec vos exemples c'est limpide !
excellent Merci
0
YoMan
25 août 2021 à 13:24
Salut,
quelques remarques:

Utiliser des popover/popup ou popunder de nos jours n'est tout de façon plus une chose à faire(car bloqué automatiquement par les principaux navigateurs).
Il y a les fenêtres modales pour remplacer efficacement cela.

Même chose pour JQuery, c'était "pratique"(ça se discute) mais c'est clairement dépassé.
En gros pour utiliser 2 fonctions (show/hide) et un peu d'Ajax la page doit charger l'ensemble du fichier JQuery(quelques centaines de ko même en fichier mimifié)... clairement pas rentable alors qu'il suffit d'écrire 2 fonctions JavaScript que vous pouvez personnaliser comme vous le voulez pour masquer/afficher et animer la chose(et éviter l'écueil que vous avez rencontré) et pareil pour AJAX. L'ensemble prends quelques dizaines de lignes donc incomparable avec un fichier complet du JQuery = chargement de la page optimisé contre lourdeur de chargement de choses complétement inutiles(le JQuery).
Cette façon de faire courante chez les novices revient à utiliser un éléphant pour accoucher d'une souris.

Bien sûr il faut apprendre à écrire soi même les fonctions du JQuery en pur JS(vanilla.js)mais ce n'est pas un investissement très lourd non plus...et ça n'a que des avantages, outre celui évoqué de l'optimisation contre son contraire(la lourdeur de chargement pour 2/3 tâches basiques) ça permet de comprendre beaucoup mieux JQuery et dans quel cas l'utiliser et dans quels cas ne pas l'utiliser(la majorité du temps c'est à éviter sauf si c'est plus rentable que de devoir écrire quelques lignes de codes adaptées).

JQuery c'est une facilité mais l'utiliser rarement un avantage et l'utiliser sans savoir utiliser JavaScript(JQuery n'est qu'un fichier de fonctions JS) une très mauvaise chose à bien des niveaux.

Avec les raisons historiques:

https://fvsch.com/js-sans-jquery

et plus en détails:
https://living-sun.com/fr/jquery/513136-how-to-not-over-use-jquery-jquery-performance.html


Tuot ça me semble correspondre(en mal) à votre approche.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524 > YoMan
25 août 2021 à 13:37
Autant la remarque concernant l'optimisation en utilisant vanilla js au lieu de jquery peut éventuellement être pertinente.

Par contre les sous-menu de navigation qui serait bloqués automatiquement pas les principaux navigateurs à remplacer par des fenêtres modales ? Je serais curieux d'avoir plus d'informations et/ou une source car j'ai jamais entendu parler de ca.
Les sous-menu (ou dropdown, popover ou autres noms...) sont heureusement encore utilisés et utilisable actuellement sur la grande majorité des sites web sur la toile.
0
YoMan > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
26 août 2021 à 05:50
oui pardon sur les pop up et bloqués par les bloqueurs de pub(qui sont quand même répandus) et window.open est supportés partiellement dans pas mal de cas:

https://caniuse.com/?search=document.open

ça reste une mauvaise pratique d'ouvrir une nouvelle fenêtre en terme de design UI/accessibilité et référencement.
Donc à éviter pour remplacer avantageusement par une fenêtre modale.
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Leboncoin : j'ai un problème d'affichage
maria1508 -
msi123 -

5 réponses
Les paramètres d'affichage NVIDIA ne sont pas
amouna -
zxk -

25 réponses
pas d'accès aux photos sur le bon coin!!!
pat -
didite -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses