fbpx

Par défaut avec le thème Divi, les menus ainsi que les sous-menus sont  tous visibles sur mobile. Voyez sur le GIF ci-dessous:

sous-menu ouvert

Refermer les sous-menus de Divi sur téléphone

 

Si vous avez un site avec plusieurs items de menu qui ont eux-mêmes plusieurs sous-menus, ça n’est pas très pratique pour le lecteur de trouver facilement celui qui l’intéresse et ça prend beaucoup de place sur l’écran. La navigation n’est donc ni agréable ni pratique.

Heureusement, vous pouvez arranger ça très simplement en utilisant le code suivant.

Commencez par ajouter ces quelques lignes dans le fichier style.css de votre thème enfant, ou dans Apparence->Personnaliser->CSS Additionnel :

/* CSS refermer les sous-menus sur mobile */

#main-header .et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent;
	position: relative; 
}
#main-header .et_mobile_menu .menu-item-has-children > a:after { 
	font-family: 'ETmodules';
	text-align: center;
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	position: absolute; 
}
#main-header .et_mobile_menu .menu-item-has-children > a:after { 
	font-size: 16px;
	content: '\4c';
	top: 13px;
	right: 10px; 
}
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { 
	content: '\4d'; 
}
#main-header .et_mobile_menu ul.sub-menu { 
	display: none !important;
	visibility: hidden !important;
	transition: all 1.5s ease-in-out;
}
#main-header .et_mobile_menu .visible > ul.sub-menu { 
	display: block !important;
	visibility: visible !important; 
}

Le code précédent permet de cacher les sous-menus et d’afficher un icone (ici l’icone “+”) pour montrer au visiteur qu’il faut cliquer pour dérouler le menu et les afficher. Je vous parle un peu plus loin des lignes surlignées.

Ajouter ensuite le code suivant dans Divi -> Options du thème -> Intégration -> Ajouter du code dans la balise <body> :

<script type="text/javascript">
(function($) {
      
    function dc_collapse_submenus() {
        var $menu = $('#mobile_menu'),
            dc_top_level_link = '#mobile_menu .menu-item-has-children > a';
             
        $menu.find('a').each(function() {
            $(this).off('click');
              
            if ( $(this).is(dc_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');
                });
            }
        });
    }
      
    $(window).load(function() {
        setTimeout(function() {
            dc_collapse_submenus();
        }, 700);
    });
 
})(jQuery);
</script>

Cette fonction JQuery va permettre d’afficher ou de cacher les sous-menus lors du clic du visiteur.

Voici le résultat obtenu :

sous-menus fermés

Les menus sont bien fermés et les sous menus s’affichent lorsque vous cliquez sur l’un d’eux.

Il est possible d’aller un peu plus loin dans la personnalisation de ce comportement en modifiant les icônes affichés lorsque les sous-menus sont ouverts ou fermés.

Modifier les icônes affichés pour ouvrir ou fermer les sous-menus de Divi sur téléphone

 

Si vous voulez modifier les icônes “+” et “x”, rendez-vous sur la page des icônes de Divi (le chapitre Complete Set and Unicode Reference Guide) ou ils sont tous listés avec les leurs attributs et choisissez ceux que vous souhaitez utiliser.

icones divi

Remplacez ensuite les valeurs de content par vos nouvelles valeurs les codes suivant dans le code CSS précédent (aux niveaux des lignes en surbrillance).

Par exemple dans le code utilisé plus haut, les valeurs des icônes “+” et “x” sont:

/* Le code pour le "+" */
content: '\4c';
/* Le code pour le "x" */
content: '\4d';

Pensez à bien modifier les “&#xe” affiché sur la page des icônes par “\” !

Un dernier exemple en utilisant des icônes différentes :

/* CSS refermer les sous-menus sur téléphone */

#main-header .et_mobile_menu .menu-item-has-children > a { 
	background-color: transparent;
	position: relative; 
}
#main-header .et_mobile_menu .menu-item-has-children > a:after { 
	font-family: 'ETmodules';
	text-align: center;
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	position: absolute; 
}

#main-header .et_mobile_menu .menu-item-has-children > a:after { 
	font-size: 16px;
	content: '\3d';
	top: 13px;
	right: 10px; 
}
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { 
	content: '\3b'; 
}
#main-header .et_mobile_menu ul.sub-menu { 
	display: none !important;
	visibility: hidden !important;
	transition: all 1.5s ease-in-out;
}
#main-header .et_mobile_menu .visible > ul.sub-menu { 
	display: block !important;
	visibility: visible !important; 
}

Et le résultat:

icones differents sous-menus

A vous de jouer !

D'autres tutoriels pouvant vous intéresser