Par défaut, le menu de Divi en mobile affiche toutes les entrées de votre menu, quelque soit la profondeur de votre arborescence. Si votre site possède une structure étoffée, cela créé un menu très long. L’utilisateur doit défiler le menu et il n’est pas facile de se repérer dans tous ces niveaux hiérarchiques.
La solution est donc d’afficher les sous-menus au clic sur les entrées parentes du menu. Nous vous expliquons dans cet article comment procéder, en fonction de la manière dont votre menu est créé.
Avec le menu par défaut de Divi
Avec un menu custom (créé via le theme builder)
Vous pouvez sinon opter pour un plugin comme Divi Pixel qui dispose de cette fonctionnalités parmis d’autres (voir notre review du plugin Divi Pixel).
ATTENTION : Si vous avez des entrées parentes qui amènent aussi vers une page.
Par exemple, une page « réalisations » existe, et possède des sous-pages de types « réalisations brique », « réalisations métal », « réalisations bois », etc. Dans ce cas le clic sur la page « réalisations » amènera vers cette page et le menu se fermera, ne permettant pas à l’utilisateur de voir le sous-menu. Si votre arborescence est de ce type, nous vous conseillons de déplacer votre page. En reprenant notre exemple, créez un lien personnalisé « Réalisations » dans votre menu qui ne pointe sur aucune page (cet élément servira uniquement à déployer le sous-menu au clic). En sous-menu de ce lien « Réalisations », mettez votre vraie page de réalisations que vous pouvez nommer « Toutes nos réalisations » puis vos autres pages « réalisations brique », « réalisations métal », « réalisations bois », etc.
Si vous souhaitez adopter un comportement de menu différent entre le desktop et le mobile, il vous faudra créer votre menu via le Divi Theme Builder.
Replier le menu par défaut de Divi en mobile
La solution est très simple et consiste à ajouter du code CSS d’un côté, et un script jQuery. Première étape, ajoutez le CSS ci-dessous. Si vous ne savez pas comment ajouter du code CSS à votre site, consultez notre guide : 5 options pour ajouter du CSS à votre site Divi. Comment choisir la bonne pour votre projet
/**styles des sous-menus replies en 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: '\33';
top: 13px;
right: 10px;
}
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
content: '\32';
}
#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;
}Dans un second temps, insérer le script suivant dans la balise <head> de votre site via les options Divi (Divi>Divi Options>Integration puis coller le script dans la zone <head>).
<!--script pour replier les sous-menus divi en mobile-->
<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>Replier le menu mobile créé via le Theme builder
- Ajouter la classe « niveau-un » à vos entrées de menu de premier niveau et « niveau-deux » à celles de second niveau. Pour appliquer une classe CSS à une entrée du menu, sélectionnez votre menu dans Apparence>Menu, puis déplier l’accordéon de votre entrée. Vous verrez un champ « Classes CSS (facultatives) ». Si vous ne voyez pas ce champ, ouvrez l’onglet « Options de l’écran » tout en haut à droite de votre écran et cocher la case « Classes CSS ». Vous devriez après cela avoir le champ disponible pour vos entrées de menu.
- Ajouter un module code sous votre menu dans votre theme builder et coller le code suivant
<style>
.et_mobile_menu .niveau-un > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .niveau-un > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .niveau-un > .icon-switch:after{
content: '\4d';
}
.niveau-deux {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 100%;
}
</style>
<script>
(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .niveau-un > a');
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>Lorsque WPML est installé, pour replier également les langues
<style>
.et_mobile_menu .niveau-un > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .niveau-un > a:after,
.et_mobile_menu > .wpml-ls-item > a::after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .niveau-un > .icon-switch::after,
.et_mobile_menu > .wpml-ls-item > .icon-switch::after {
content: '\4d';
}
.niveau-deux,
.et_mobile_menu > .wpml-ls-item > .sub-menu > .menu-item {
display: none;
}
.reveal-items {
display: block !important;
}
.et_mobile_menu {
margin-top: 20px;
width: 100%;
}
.et_mobile_menu .wpml-ls-menu-item .wpml-ls-flag {
display: inline !important;
}
</style>
<script>
(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .niveau-un > a, .et_mobile_menu > .wpml-ls-item > a');
FirstLevel.off('click').click(function(event) {
event.preventDefault();
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>