▶ Insertion d’un menu déroulant pour Mobile Divi -Facile et rapide

Contenu

Les pages Web sont une fenêtre sur n’importe quel monde. Dans un ou plusieurs vous pouvez obtenir n’importe quel type d’information grâce aux personnes qui sont derrière chacun développer du contenu intéressant et utile. Tout cela grâce à la création de pages web dans WordPress et à l’aide des typographes des pages Divi.

Les blogs ont atteint leur point culminant en termes de popularité, entre 2001 et 2002, atteignant leur point culminant comme mises à jour et mises à niveau roses.

La naissance de WordPress

Après le grand impact qu’ils avaient des blogs, Blogger principalement après avoir été acquis par Google en 2003, il est sorti la même année, WordPress.

Ceci est appelé gestionnaire de contenu , J’ai ciblé la création et le design de pages web . À ce jour, il est toujours considéré comme un outil fondamental pour ce type de travail, en particulier dans le domaine du commerce.

  La naissance de WordPress

L’ajout de Divi

Peu importe à quel point il peut devenir WordPress, ce n’est un secret pour personne que ceux qui ont le plus de difficulté à gérer de telles plateformes et à créer des pages Web sont des personnes qui n’ont pas connaissances en HTML et CSS

.

diviser est un outil qui vient en aide précisément à ceux qui ont peu de capacité de gestion en termes de WordPress, vous pouvez donc vous instruire lentement et apprendre à gérer de manière optimale cette plate-forme.

Pour ceux qui connaissent déjà WordPress, il est beaucoup plus facile de concevoir des entrées dans votre option de blog ou de site Web.

Au moment où vous entrez dans Divi depuis votre téléphone mobile, cette plateforme ainsi que la grande majorité des pages web proposent une vision différente du bureau. Cela signifie que si vous avez un menu sur la page Web que vous développez, il devient très étendu et opaque le reste de la conception qui a fait .

Quelle est la solution?

La première chose à vous demander est de savoir quelle solution vous souhaitez adopter. Quand il s’agit de menus, plus recommandé est que les sous-menus ne soient déployés que lorsque le visiteur du site Web en fait la demande . Ainsi, l’expérience utilisateur sera plus accueillante en visite.

Si telle est votre intention, il existe un certain nombre de les codes doivent simplement être copiés et collés dans Divi pour résoudre ce problème en offrant une interface beaucoup plus agréable à la vue de ceux qui peuvent visiter votre site Web.

Le code à utiliser

Le codage nécessaire pour changer la façon dont il se déroule le menu est assez étendu, mais efficace. Entrer le Options de thème Divi puis Intégration, copiez-collez le code suivant :

< type de script = «texte/javascript» & gt;

(fonction ($) {

fonction setup_collapsible_submenus () {

var $menu = $(‘#mobile_menu’),

top_level_link = ‘#mobile_menu .menu-item-a-des-enfants & gt; pour ‘;

$menu.trouver(‘a’). Chaque (fonction () {

$(this).OFF( ‘clic’);

si ($ (ceci).is (top_level_link)) {

$(this).attr( ‘href’, ‘#’);

}

if (! $ (This). frères et sœurs ( ‘. Sous-menu). Longueur) {

$ (this).on ( ‘clic’, fonction (événement) {

.

$(this).parents(‘.mobile_nav’)trigger(‘click’);

});

} autre {

Vous pourriez également être intéressé par :

Vous serez peut-être intéressé par l'article suivant:

$ (this).on ( ‘clic’, fonction (événement) {

event.preventDefault();

$(this).parent() toggleClass(‘visible’);.

});

}

});

}

$(fenêtre).load(fonction(){

setTimeout(fonction() {

setup_collapsible_submenus();

}, 700);

});

}) (jQuery);

& lt;/script & gt;

< type de style = «texte/css» & gt;

# en-tête principal .et_mobile_menu .menu-item-has-children & gt; à {background-color : transparent ; position:relative ; }

# en-tête principal .et_mobile_menu .menu-item-has-children & gt; à : après {font-family ‘ETmodules’ ; aligner le texte : centrer ; parler : aucun ; poids de la police : normal ; variante de police : normale ; transformation de texte : aucune ; -webkit-font-smoothing : anticrénelé ; position : absolue ; }

# en-tête principal .et_mobile_menu .menu-item-has-children & gt; à : après {font-size : 16px ; contenu : ‘4c’ ; haut : 13 px ; droite : 10px ; }

# en-tête principal .et_mobile_menu .menu-item-has-children.visible & gt; à : après {contenu : ‘4d’ ; }

# main-header .et_mobile_menu ul.sub-menu {affichage : aucun ! Important; visibilité : cachéimportant ; ! transition : toutes les 1,5 s d’entrée et de sortie ;}

# en-tête principal .et_mobile_menu .visible & gt; ul.sub-menu {affichage : bloquer ! important; visibilité : visibleimportant ; }

</style>

  Le code à utiliser

D’autres façons d’optimiser

Parmi les autres codes qu’il est recommandé d’utiliser, est que pour fermer le menu . Si l’utilisateur qui visite votre site Web n’est pas souhaité dans le menu déroulant et les sous-menus, vous devriez pouvoir le fermer.

Autrement , l’affichage du menu peut masquer la vue du reste du site. Et étant donné que vous naviguez depuis le téléphone mobile, il est plus sûr d’éclipser toute la page. Si vous souhaitez supprimer le produit, copiez et collez le code ci-dessous

/* Change le menu en X lorsqu’il est ouvert */

.mobile_nav.opened .mobile_menu_bar : avant {

contenu : ‘4d’ ;

}

Vous pourriez également être intéressé par :

Vous serez peut-être intéressé par l'article suivant:

Maintenant que vous savez comment insérer un menu déroulant chez Divi mobile soustrait que vous seul savez et utilisez au maximum les meilleurs plugins WordPress pour prendre le dessus en créant vos pages web.

Que pensez-vous de ce contenu ?

Cliquez sur une étoile pour noter !

Score moyen 0 / 5. Dépouillement des votes : 0

Jusqu'à présent, aucun vote. Soyez le premier à évaluer ce contenu.

Deja un comentario