Discussion :

[AMP29]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[AMP29]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[mathieu]

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[AMP29]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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