comportement wp_nav_menu - ouverture et fermeture intempestives des menus

Version imprimable

Bonjour,

Je rencontre un problème avec wp_nav_menu.
J'ai un menu avec plusieurs items qui ont tous des sous-menus.

Lorsque je clique sur un menu il se déploie et se referme.
Lorsque je clique sur un sous-menu, il se referme.

Je voudrais que cela ne se déploie pas quand c'est un menu et je voudrais qu'il ne se ferme pas quand c'est un sous-menu.

Difficile de vous donner plus d'explication, je débute et j'ai un peu de mal d'avoir les idées claires sur le sujet.

un extrait du Header

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
                     <div class="montheme-navigation">
                        <nav id="site-navigation" class="main-navigation">
                            <span class="toggle-menu" aria-controls="primary-menu" aria-expanded="false">
                                <span class="screen-reader-text">
                                    <?php esc_html_e('Primary Menu', 'minimal-grid'); ?>
                                </span>
                                <i class="ham"></i>
                            </span>
                            <?php
                                 wp_nav_menu(array(
                                    'menu_id' => 'primary-menu',
                                    'container' => 'div',
                                    'container_class' => 'menu-wrapper',
                                    'depth' => 3,
                                ));
                             ?>
                     </div>

Si je mets simplement

Code:

1
2
3
4
 
                                wp_nav_menu(array(
 
                                ));

Le comportement est identique.

J'ai tenté mille trucs dans le CSS mais sans résultat.

Il y a-t-il un argument dans wp_nav_menu pour empêcher cela ?

Merci pour votre aide

26/02/2021, 01h54
mathieu

la fonction "wp_nav_menu" s'occupe seulement de générer le code html du menu.
ensuite le comportement du menu dépend du code css et du code javascript qui le gère, donc cela se règle certainement au niveau du thème.

si le thème est disponible librement, indiquez nous celui que vous utilisez.
dans le cas contraire, ne nous pouvons pas le tester pour trouver le problème et vous aurez surement plus d'aide en contactant le vendeur du thème.

Bonjour Mathieu,

Merci pour votre réponse.

Le thème est libre, il s'agit de "minimal grid".
J'utilise un thème enfant sur mon site en ligne qui se trouve pour le moment à l'adresse :
http://mobilier.zuleika-arts.fr/

En ligne un seul des deux problèmes que je mentionne survient.
Celui qui referme le menu lorsqu'on clique sur un sous-menu.
Si vous ouvrez le menu "Mobilier" et cliquez sur "Tables" par exemple, il se referme aussitôt.

Le site fonctionne sous WP 5.5.3. La version de Minimal Grid est 1.0.8, je n'ai pas appliqué de mise à jour.

En localhost avec WP 5.6.1 et Minimal Grid 1.2.9 (censé être compatible WP 5.6.1), j'ai d'abord rencontré un gros problème de page blanche que j'ai réussi à identifier.
Dans le header cette partie ne fonctionne pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    <?php if (function_exists('wp_body_open')) {
        wp_body_open();
    }
    ?>
    <?php $enable_preloader = minimal_grid_get_option('enable_preloader', true);
    if ($enable_preloader) { ?>
        <div class="preloader">
            <div class="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
    <?php } ?>

Heureusement c'est une option admin que l'on peut décocher (theme option> preloader option)
et je n'ai pas eu besoin de traiter cela dans le code.
(je vous le dis à toute fin utile, si cela peut avoir une relation avec mon problème de menu)

j'ai les deux problèmes du menu en localhost, avec WP 5.6.1 et Minimal Grid 1.2.9.
C'est la configuration future pour mon site sur laquelle je travaille actuellement.

Ici un extrait CSS (bidouillée) de la partie que je pense correspondre au menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* ----------------------------------------- MENU MAIN NAVIGATION ----------------------------- */
 
/*------------------------------------------------------------------------------ AMP AMP -------------------------*/
.main-navigation li.menuhome > a{
	font-weight: 600;
	padding:10px !important;
}
.main-navigation li.menucontact > a{
	font-weight: 600;
	padding:10px !important;
}
/*------------------- mise en retrait des menus Accueil et Contact ------------------------------------------------*/
 
.main-navigation ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
 
#primary-menu li a:hover, li a:focus, li a:active {
    color: #666;
  }
 
#primary-menu ul a:active {
    text-decoration: underline !important;
  }
 
.main-navigation ul li a {
    padding: 10px 25px;
    display: block;
    transition: color 0.05s linear;
    text-decoration: none;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
 
.main-navigation #primary-menu ul.sub-menu li a {
    font-size: 14px;
}
 
.main-navigation .menu-wrapper > ul > li.current-menu-item > a,
.main-navigation .menu-wrapper > ul > li:hover > a,
.main-navigation .menu-wrapper > ul > li:focus > a {
    color: #ff2222;
}
 
.main-navigation .menu li .sub-menu,
.main-navigation .menu li .children {
    list-style: none;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    display: none;
    /* display: block; */
 
}
 
.main-navigation .menu li a i {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 30px;
    z-index: 1;
}
 
.main-navigation .menu li a i.active:after {
    width: 13px;
    height: 1px;
}
 
.main-navigation .menu li a i:before,
.main-navigation .menu li a i:after {
    content: '';
    width: 13px;
    height: 1px;
    background-color: #152035;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
 
.main-navigation .menu li a i:after {
    width: 1px;
    height: 13px;
}
/* --------------------------------------------------------------------------*/

Merci pour votre aide.

essayez le code suivant à mettre dans le fichier functions.php du thème enfant.
je ne suis pas spécialiste en javascript donc je ne sais pas s'il est optimisé
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 add_action("wp_footer", function () { ?> <script> jQuery(function ($) { $(".current-menu-item").closest(".menu-item-has-children").each(function() { let ethis = $(this).find("a"), eparent = ethis.parent('li'), esub_menu = eparent.find('> .sub-menu'); if (!ethis.hasClass('active')) { esub_menu.slideDown('300'); ethis.addClass('active'); } }); }); </script> <?php });
au sujet de votre remarque de page blanche, j'ai eu plusieurs fois un souci de chargement qui restait bloqué donc je pense que le thème a encore des bugs.

26/02/2021, 22h31
AMP29

Je vous réponds rapidement mais il va me falloir du temps pour comprendre ce que fait votre script et essayer de suivre la piste.

C'est très intéressant, cependant le menu (quand on clique sur "Mobilier" par exemple) s'ouvre, se referme, puis s'ouvre à nouveau.
J'aimerais qu'il ne tente même pas de s'ouvrir. Comme cela se produit sur mon site en ligne.

Ensuite, le comportement lors d'un clique sur un sous-menu est changeant.
Parfois le menu se referme puis se réouvre. Parfois il ne se réouvre pas.

Il y a aussi une icône pointer (icon-nav-down) "+" et "-" qui n'est plus corrélée au dépliement ou repliement du menu.

Merci

Bonjour,

Tout a l'air de se passer dans le fichier script.js de Minimal Grid qui a beaucoup changé d'une version à l'autre.
(minimal Grid > assets >Thememattic > js > script.js)

Je rappelle les deux problèmes que je cherche à régler :
1 - Ouverture et fermeture immédiate lors d'un clique sur menu Parent
2 - repliement du menu lors d'un clique sur sous-menu

Je vous mets ici les extraits concernés dans les deux versions de script.js

Version 1.2.9 (qui possède les deux problèmes)
Les mises en commentaire ne sont pas de moi, y compris les console.log

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
    n.mobileMenu = {
        init: function () {
            this.toggleMenu();
            this.menuArrow();
        },
        toggleMenu: function () {
            e('.nav-toogle').on('click', function (event) {
                e('body').toggleClass('extended-menu');
 
            });
            e('.main-navigation').on('click', 'ul.menu a i', function (event) {
                event.preventDefault();
                var ethis = e(this),
                    eparent = ethis.closest('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                // console.log(esub_menu.css());
                // if (esub_menu.css('display') == 'none') {
                //     console.log('aye');
                //     esub_menu.slideDown('300');
 
                // } 
                if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    esub_menu.slideDown('300');
                    ethis.addClass('active');
 
                }
 
 
                //else if (esub_menu.css('display') == 'block') {
                //     console.log('aye');
                //     esub_menu.slideUp('300');
                //     ethis.removeClass('active');
                // } 
                // else {
                //     //console.log('aye');
                //     esub_menu.slideDown('300');
                //     ethis.addClass('active');
                // }
                return false;
            });
            e('.main-navigation').on('focus', '.menu-item-has-children > a', function(event) {
                var ethis = e(this),
                    eparent = ethis.parent('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                // console.log(esub_menu);
 
                if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    esub_menu.slideDown('300');
                    ethis.addClass('active');
                }
 
                return false;
            });
        },
        menuArrow: function () {
            if (e('.main-navigation ul.menu').length) {
                e('.main-navigation ul.menu .sub-menu').parent('li').find('> a').append('<i class="icon-nav-down">');
            }
        }
    };

Version ancienne 1.0.8 du site en ligne (qui ne possède que le problème 2)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
    n.mobileMenu = {
        init: function () {
            this.toggleMenu(), this.menuArrow()
        },
 
        toggleMenu: function () {
            e('.nav-toogle').on('click', function (event) {
                e('body').toggleClass('extended-menu');
            });
 
            e('.main-navigation').on('click', 'ul.menu a i', function (event) {
                event.preventDefault();
                var ethis = e(this),
                    eparent = ethis.closest('li'),
                    esub_menu = eparent.find('> .sub-menu');
                if (esub_menu.css('display') == 'none') {
                    esub_menu.slideDown('300');
                    ethis.addClass('active');
                } else {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                }
                return false;
            });
        },
 
        menuArrow: function () {
            if (e('.main-navigation ul.menu').length) {
                e('.main-navigation ul.menu .sub-menu').parent('li').find('> a').append('<i class="icon-nav-down">');
            }
        }
    },

Et effectivement, lorsque je mets en commentaire dans le script de la version 1.2.9 la partie

Code:

1
2
3
4
5
6
7
8
9
10
 
                if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    // esub_menu.slideDown('300');
                    // ethis.addClass('active');
                }
 
                return false;

Je règle le problème 1. Le menu n'essaie plus de se déplier.

Un pur remplacement du script 1.2.9 par le script 1.0.8 entraîne beaucoup d'erreurs ailleurs.

Mathieu, c'est grâce à vous si j'ai eu l'idée de faire une recherche sur le terme 'slidedown' que je ne connaissais pas. Merci.

Maintenant je ne suis pas assez calé pour inventer une solution pour le problème 2.
Je voudrais que le sous-menu reste ouvert quand l'utilisateur l'a déplié lui-même et clique sur un élément.
Merci

Précision supplémentaire.

J'ai placé un console.log juste avant le "return false;" de la fonction, je le vois donc apparaître à chaque manipulation du menu, mais lors du repliement après un clique sur un sous-menu la console n'affiche rien.
Un indice peut-être que la fonction n'est pas sollicitée à ce moment.
Peut-être un problème à régler dans le CSS.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 if(ethis.hasClass('active')) { esub_menu.slideUp('300'); ethis.removeClass('active'); } else { // esub_menu.slideDown('300'); ethis.addClass('active'); } console.log('Presque'); return false; });
Merci

27/02/2021, 12h14
mathieu

si vous voulez modifier un fichier, il ne faut pas faire cela dans le répertoire parent sinon la modification sera écrasée à la prochaine mise à jour.
pour éviter cela, vous pouvez enlever le chargement du fichier js du thème parent et ajouter le chargement d'un nouveau fichier du thème enfant. cela se fait avec ces fonctions :
https://developer.wordpress.org/refe...equeue_script/
https://developer.wordpress.org/refe...nqueue_script/

Citation:

Envoyé par AMP29

Maintenant je ne suis pas assez calé pour inventer une solution pour le problème 2.
Je voudrais que le sous-menu reste ouvert quand l'utilisateur l'a déplié lui-même et clique sur un élément.

cela ne change pas avec le code que je vous ai donné ?
27/02/2021, 13h07
AMP29

Oui, je travaille normalement avec des thèmes enfants, mais à l'origine je voulais créer un nouveau thème et de fil en aiguille je me suis retrouvé à bidouilller le parent que j'avais comme modèle.
Je conserve les traces.
Une fois que j'aurais obtenu mon résultat, soit je créé le thème enfant qui convient, soit je repars sur une base complète et neuve en créant un thème perso.

Comme je l'avais indiqué, votre script intéressant force le sous-menu à s'afficher une seconde fois après l'action qu'il entraîne.
Il se ferme, et se réouvre aussitôt. Occasionnant ainsi le même effet indésirable que lorsque je clique sur un menu parent.
Je vais essayer de l'intégrer dans le script.js, à la racine du problème, comme cela il n'agira pas à la fin de tout dans le footer.

Merci

Je n'avance pas.

J'ai créé une nouvelle fonction dans script.js
Code:

1 2 3 4 5 6 7 n.mobileMenu = { init: function () { this.toggleMenu(); this.menuArrow(); this.sousMenu(); // <<<<<<<<<<<<< },
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 sousMenu: function(){ e(".current-menu-item").closest(".menu-item-has-children").each(function() { let ethis = e(this).find("a"), eparent = ethis.parent('li'), esub_menu = eparent.find('> .sub-menu'); if (!ethis.hasClass('active')) { esub_menu.slideDown('300'); ethis.addClass('active'); } });
Un clique sur un parent, déroule le sous-menu. Pas bon.
Un clique dans le sous-menu, ferme le sous-menu puis le réouvre. Pas tout bon.

Je reviens avec le problème 1.
Et, pour le problème 2, si le sous-menu finit par s'afficher, il se referme d'abord et se réouvre.

Quelque chose ferme le sous-menu en amont de cette méthode.
Ce n'est qu'après que la méthode est exécutée et rouvre le sous-menu.
Après que Document soit ready.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 e(document).ready(function () { n.mobileMenu.init(); n.ThemematticSearch(); n.ThemematticPreloader(); n.ThemematticSlider(); n.MagnificPopup(); n.DataBackground(); n.scroll_up(); n.thememattic_reveal(); n.thememattic_matchheight(); n.toogle_minicart(); n.ms_masonry(); n.setLoadPostDefaults(); n.fetchPostsOnClick(); n.fetchPostsOnMenuClick(); });
Je n'arrive pas à trouver ce qui s'exécute aussitôt après le clique et avant que la méthode soit appelée.

Je vois partout qu'il s'agit d'un "mobileMenu" un "toggleMenu" qui donc doit se comporter de manière à toujours se refermer en premier.
Je ne trouve pas comment éviter cela.

28/02/2021, 16h46
mathieu

je pense qu'il ne s'agit plus d'un souci spécifique à wordpress donc peut-être que vous aurez plus d'aide en créant une nouvelle discussion sur le forum javascript.
28/02/2021, 17h05
AMP29

Ok oui, j'étais justement en train de me dire ça. : )
Il y a une possibilité de déplacer le sujet ?
Ça m'éviterait de repartir à zéro.
Merci
02/03/2021, 11h15
AMP29

La résolution de ces problèmes se trouve dans le forum JQuery :
https://www.developpez.net/forums/d2...estives-menus/