Avec deux simples copiés collés, je te montre comment améliorer
l’expérience utilisateur sur le menu mobile de ton site web
Par défaut, tous les onglets des menus sont ouverts. Si tu as peu de liens dans ton sous-menu, tout va bien !
Mais dès lors où tu commences à ajouter beaucoup de pages dans tes menus secondaires,
la lecture devient indigeste sur tablette et mobile !
Tu veux absolument faire attention à l’expérience utilisateur de tes visiteurs
en permettant une lisibilité parfaite de ton arborescence.
Et tu as tellement raison, cette astuce très simple va t’aider !
5 étapes très simples
La bonne méthode :
- Rendez-vous sur tur son espace administrateur de WordPress, onglet Divi / Option Theme
- Copier le script (ci-dessous), coller dans l’onglet « L’intégration – Ajouter ligne de code à la < head > de votre blog »
- Copier le code CSS (ci-dessous), le coller dans l’onglet « Général – Personnaliser CSS ».
- Modifier la couleur de l’icone d’ouverture pour l’adapter à sa charte graphique
- Sauvegarder les changements
Les codes à copier-coller
SCRIPT
<script >
jQuery(function($) {
$(document).ready(function() {
$(« body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children »).append(‘<a href= »# » class= »mobile-toggle »></a>’);
$(‘ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle’).click(function(event) {
event.preventDefault();
$(this).parent(‘li’).toggleClass(‘dt-open’);
$(this).parent(‘li’).find(‘ul.children’).first().toggleClass(‘visible’);
$(this).parent(‘li’).find(‘ul.sub-menu’).first().toggleClass(‘visible’);
});
iconFINAL = ‘P’;
$(‘body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children’).attr(‘data-icon’, iconFINAL);
$(‘.mobile-toggle’).on(‘mouseover’, function() {
$(this).parent().addClass(‘is-hover’);
}).on(‘mouseout’, function() {
$(this).parent().removeClass(‘is-hover’);
})
});
});
</script>
CSS
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*some code to keep everyting positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*submenu toggle icon when closed*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: « ETModules »;
content: ‘\33’;
color: #00d263;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: ‘\32’;
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: »;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}
Voilà, il ne te reste plus qu’à vérifier que tout fonctionne bien !
Si tu ne l’as pas encore lu, je t’invite à voir mon astuce pour créer une barre de navigation sticky sur ta version mobile : Lire l’article
Plusieurs possibilités !
Tu peux t’abonner à ma newsletter pour ne louper aucune info, à ma chaine YouTube ou me suivre sur mon compte Instagram !
Bonjour Steph !
J’ai voulu appliquer ton astuce sur un site que je suis en train de faire, mais ça ne fonctionne pas…
J’ai d’abord pensé que c’était parce que j’avais fait mon entête avec le builder et pas gardé celui par défaut, mais même en essayant avec l’entête par défaut, le petit icône d’ouverture n’apparaît pas et au clic, ça m’amène juste sur la page du premier lien, mais je ne vois pas les sous-pages…
Est-ce que tu saurais y remédier ?
Merci !
Coucou Aline.
Tu peux utiliser cette astuce en créant ton header via le Thème Builder de Divi sans problème (c’est ce que j’ai fait d’ailleurs !)
Alors si ça ne fonctionne pas deux premières possibilités :
Le mieux serait de recommencer en vérifiant d’avoir bien récupéré jusqu’à la moindre « } ». Le code, c’est susceptible !
Tu me diras si ça fonctionne maintenant !
(Dans le doute, j’ai refait le test de mon côté et ça fonctionne bien.)
Belle soirée
Steph 🌻