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 :

  1. Rendez-vous sur votre Dashboard WordPress.
  2. Cliquez sur « Apparence » puis sur « Menus ».
  3. 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

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

Ajout du code CSS

  1. Rendez-vous sur le Dashboard WordPress de votre site.
  2. Cliquez sur « Divi » puis sur « Personnaliseur de ThÚme ».
  3. 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

  1. Rendez-vous sur le Dashboard WordPress de votre site.
  2. Cliquez sur « Divi » puis sur « Options du ThÚme ».
  3. 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.