cacher_element_menu_mobile

Comment ajouter un élément de sous-menu Divi seulement sur mobile ?

Marlène

9 novembre 2020

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 CSS 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 CSS.

  • Dans la section menu, ouvrez les options d’écran sur le côté.
  • Cliquez sur les options CSS classes.

 

CSS ajout sous-menu

Ensuite, appliquez la class CSS onlyMobile sur le ou les éléments ajoutés.

ajout class sous-menu

Enfin, ajoutez le CSS 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.

Sous-menu Caroline Alamy
dégradé noir gris