Refermez automatiquement les sous-menus de votre site Divi sur mobile

Évitez que les sous-menus restent ouverts et gênent la navigation sur mobile

Cet article explique comment configurer votre site Divi pour que les sous-menus se referment automatiquement lorsque les utilisateurs naviguent sur la version mobile. Cette astuce simple améliore l’expérience utilisateur en évitant que les sous-menus restent ouverts après avoir cliqué dessus. Suivez ce tutoriel étape par étape pour implémenter facilement ce réglage avec seulement quelques lignes de code.

Pourquoi c’est important :

La fermeture automatique des sous-menus sur mobile est importante pour l’expérience utilisateur car elle empêche que de longs menus verticaux restent affichés à l’écran. Cela optimise l’interface pour le mobile en ne gardant visible que le menu principal jusqu’à ce que l’utilisateur sélectionne un sous-menu. Le site est ainsi plus facile à naviguer sur petite taille d’écran. Ce réglage apporte un confort d’utilisation et évite la frustration. En résumé, il s’agit d’un tweak simple mais efficace pour améliorer l’ergonomie de votre site Divi sur mobile.

Refermez automatiquement les sous-menus de votre site Divi sur mobile

Le tuto en vidéo

Réglez vos emplacements de menu – Première étape pour refermer automatiquement les sous-menus Divi sur mobile

Tout d’abord, gérez l’emplacement du menu en procédant comme suit :

Rendez-vous sur votre Dashboard WordPress.
Cliquez sur « Apparence » puis sur « Menus ».
Dans l’onglet « Gérer les emplacements », choisissez « Main Navigation » à la fois pour l’emplacement « Menu principal » et pour l’emplacement « Menu pied de page ». Copier-coller le premier code CSS

Si vous n’avez pas l’option « Main navigation » remplacez là par « Menu principal » et copier-coller le deuxième code CSS

Ajout du code CSS

Rendez-vous sur le Dashboard WordPress de votre site.
Cliquez sur « Divi » puis sur « Personnaliseur de Thème ».
Dans la section « CSS additionnel », copiez et collez le code CSS suivant :

Refermez automatiquement les sous-menus de votre site Divi sur mobile - Code CSS

Code CSS pour l’option « Main navigation »

/**** Cela permet de masquer les éléments du sous-menu sur les téléphones portables ****/
#page-container .mobile_nav li ul.hide {
    display: none !important;
}
/**** Cela permet d'ajuster le positionnement et la transparence de l'arrière-plan de l'élément de menu parent sur les téléphones mobiles. ****/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}
/**** Cette opération permet de styliser l'icône et de la déplacer vers la droite ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}
/**** Ici, vous pouvez remplacer les icônes actuelles ****/
#page-container span.menu-closed:before {
    content: "\+";
    display: block;
    color: #000;
    font-size: 16px;
    font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
  content: "\x";
}

Code CSS pour l’option « Menu principal »

.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: '\4c';
    top: 11px;
    right: 13px;
}

.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}

.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

Changer les icônes

Vous pouvez remplacer les icônes (dans l’exemple « + » et « x ») à la ligne 25 et 32.

Ajout du code jQuery

Rendez-vous sur le Dashboard WordPress de votre site.
Cliquez sur « Divi » puis sur « Options du Thème ».
Dans la section « Intégration », allez dans l’onglet « Body » et collez le code jQuery suivant :

Refermez automatiquement les sous-menus de votre site Divi sur mobile - Code JQuéry

Code JQuéry pour l’option « Main navigation »

<script>
(function($) { 
    function setup_collapsible_submenus() {
        // mobile menu
        $('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        $('.mobile_nav .menu-item-has-children > a').each(function() {
            $(this).next().next('.sub-menu').toggleClass('hide',1000);
        });
        $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('menu-open');
            $(this).next('.sub-menu').toggleClass('hide',1000);
        });
    }
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>

Code JQuéry pour l’option « Menu principal »

<script>
jQuery(document).ready(function($){
    function ds_setup_collapsible_submenus() {
        var $menu = $('.et_mobile_menu'),
        top_level_link = '.et_mobile_menu .menu-item-has-children > a';
        
        $menu.find('a').each(function() {
            $(this).off('click');
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } 
            else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            }
        });
    }
    setTimeout(function() {
        ds_setup_collapsible_submenus();
    }, 700);
 });
</script>

J’espère que ce tutoriel vous a inspiré à explorer tout le potentiel de customisation des menus sur la version mobile de votre site Divi. N’hésitez pas à personnaliser davantage l’apparence et le comportement du menu pour créer une expérience optimale adaptée aux appareils mobiles de vos visiteurs.