Si vous avez un menu avec différents niveaux sur Divi, vous avez peut-être suivi ce tutoriel de Divi Space qui permet de refermer les sous-menus sur mobile. En appliquant cette méthode, le principal souci est que l’item de premier niveau, l’item parent de votre menu, ne sera plus accessible. Pour résoudre ce souci, nous allons voir comment ajouter un élément dans le sous-menu uniquement sur mobile.
Refermer le sous-menu
Pour rappel, voici le code du tutoriel de Divi space, à ajouter dans les options CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... de Divi :
.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
.et_pb_fullwidth_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,
.et_pb_fullwidth_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,
.et_pb_fullwidth_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,
.et_pb_fullwidth_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu .visible > ul.sub-menu,
.et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu,
#main-header .et_mobile_menu .visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}Ensuite, le Javascript à intégrer dans les options Divi > Theme Options > Integration > Add code to the body est le suivant :
<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');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
ds_setup_collapsible_submenus();
}, 700);
});
});
</script>Refermer les sous-menus permet d’avoir une meilleure lisibilité et une meilleure ergonomie. Cependant, il peut y avoir un inconvénient à cette méthode : si votre élément parent mène vers une page sur desktop, le lien ne pourra pas fonctionner sur mobile comme le clic déroule seulement le sous-menu.
Pour résoudre ce souci, vous pouvez adapter votre menu sur mobile en insérant le lien de votre item parent dans le menu déroulant. Pour cela, ajoutez l’élément manquant dans votre menu puis insérez une class CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos....
- Dans la sectionUne section est une division d'une page qui peut contenir plusieurs modules. Les sections permettent de structurer les p... menu, ouvrez les options d’écran sur le côté.
- Cliquez sur les options CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... classes.
Ensuite, appliquez la class CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... onlyMobile sur le ou les éléments ajoutés.
Enfin, ajoutez le CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... suivant dans les options de Divi pour voir cet élément seulement sur mobile.
@media all and (min-width:767px){
.onlyMobile{display:none !important}}Un exemple en pratique
Sur le site de Caroline Alamy, l’item parent « travel » contient un lien menant vers une page du site. En refermant les sous-menus, la page travel n’est plus accessible. En créant un nouveau lien « See the World Map » sur mobile, cette page est de nouveau visible via le menu.
Besoin d’aide sur votre site Divi ?
Si vous avez besoin de finaliser votre site et que vous avez encore des questions, n’hésitez-pas à faire appel à notre accompagnement personnalisé et spécialisé sur Divi.
