Comment insérer un menu déroulant mobile dans DIVI – Rapide et facile
Les pages Web sont une fenêtre sur n’importe quel monde. En un ou plusieurs, vous pouvez obtenir n’importe quel type d’informations grâce aux personnes derrière chacune d’elles développant un contenu intéressant et utile. Tout cela grâce à la création de pages Web dans WordPress et à l’aide du constructeur de pages Divi.
Les blogs ont atteint un sommet de popularité entre 2001 et 2002, atteignant un sommet avec l’ émergence de mises à jour et d’améliorations.
La naissance de WordPress
Après le grand impact des blogs, principalement Blogger après son acquisition par Google en 2003, WordPress a été lancé la même année.
C’est ce qu’on appelle un gestionnaire de contenu , axé sur la création et la conception de pages Web . À ce jour, il est toujours considéré comme un outil fondamental pour ce type de travail, en particulier dans le domaine commercial.
Le plugin Divi
Aussi utile que puisse être WordPress, ce n’est pas un secret que ceux qui ont le plus de difficultés à gérer ce type de plateforme et à créer des pages Web sont des personnes qui n’ont pas de connaissances en HTML et CSS .
Divi est un outil qui vient aider , justement, ces personnes qui ont peu de capacité de gestion concernant WordPress, afin qu’elles puissent être instruites petit à petit et apprendre à gérer de manière optimale cette plateforme.
Pour ceux qui connaissent déjà WordPress, c’est une option beaucoup plus simple lors de la conception des articles sur votre blog ou site Web.
Le menu déroulant
Lorsque vous entrez dans Divi depuis votre téléphone mobile, cette plate-forme, ainsi que la grande majorité des pages Web, offrent une vue différente de celle du bureau. Cela signifie que, dans le cas où vous avez un menu sur la page Web que vous développez, il devient très étendu et éclipse le reste du design que vous avez développé .
Qui est la solution?
La première chose que vous devez vous demander est la solution que vous souhaitez adopter. En ce qui concerne les menus déroulants, il est préférable que les sous-menus ne soient pas affichés tant que le visiteur du site Web ne le demande pas . De cette manière, l’expérience utilisateur lors de la visite sera plus accueillante.
Si telle est votre intention, il existe une série de codes que vous n’avez qu’à copier et coller dans Divi pour résoudre ce problème en fournissant une interface beaucoup plus agréable pour ceux qui visitent votre site Web.
Le code à utiliser
Le codage requis pour modifier la façon dont le menu est affiché est quelque peu étendu, mais efficace. Entrez les options du thème Divi , puis Intégration, copiez et collez le code suivant:
<script type = »text / javascript»>
(fonction ($) {
function setup_collapsible_submenus () {
var $ menu = $ (‘# menu_mobile’),
top_level_link = ‘#menu_mobile .menu-item-has-children> a’;
$ menu.find (‘a’). each (function () {
$ (this) .off (‘clic’);
if ($ (this) .is (top_level_link)) {
$ (this) .attr (‘href’, ‘#’);
}
if (! $ (this) .siblings (‘. sub-menu’). length) {
$ (this) .on (‘clic’, fonction (événement) {
$ (this) .parents (‘. mobile_nav’). trigger (‘clic’);
});
} autre {
$ (this) .on (‘clic’, fonction (événement) {
event.preventDefault ();
$ (this) .parent (). toggleClass (‘visible’);
});
}
});
}
$ (fenêtre) .load (fonction () {
setTimeout (fonction () {
setup_collapsible_submenus ();
}, 700);
});
}) (jQuery);
</script>
<style type = »text / css»>
# 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: centre; parler: aucun; poids de la police: normal; variante de police: normal; text-transform: aucun; -webkit-font-smoothing: anti-crénelé; position: absolue; }
# main-header .et_mobile_menu .menu-item-has-children> a: after {font-size: 16px; contenu: ‘\ 4c’; haut: 13px; à droite: 10px; }
# main-header .et_mobile_menu .menu-item-has-children.visible> a: after {content: ‘\ 4d’; }
# main-header .et_mobile_menu ul.sub-menu {affichage: aucun! important; visibilité: cachée! importante; transition: tous les 1,5s facilité-entrée-sortie;}
# main-header .et_mobile_menu .visible> ul.sub-menu {affichage: block! important; visibilité: visible! importante; }
</style>
Autres alternatives à optimiser
Parmi les autres codes qu’il est recommandé d’utiliser, il y a celui qui vous permet de fermer le menu . Si l’utilisateur qui visite votre site Web ne trouve pas ce qu’il veut dans le menu déroulant et les sous-menus, il devrait pouvoir le fermer.
Sinon , l’affichage du menu peut masquer la vue du reste de la page Web. Et en tenant compte du fait que vous naviguez à partir de votre téléphone mobile, il est fort probable que vous masquiez la page entière. Si vous souhaitez le supprimer, copiez et collez le code suivant :
/ * Changer le menu en X lorsqu’il est ouvert * /
.mobile_nav.opened .mobile_menu_bar: avant {
contenu: ‘\ 4d’;
}
Maintenant que vous savez comment insérer un menu déroulant mobile dans Divi, il ne vous reste plus qu’à connaître et à tirer le meilleur parti des meilleurs plugins WordPress pour amener la création de vos pages Web au sommet.
