Como inserir um menu suspenso móvel no DIVI – Rápido e fácil

Depois do grande impacto que os blogs estavam tendo, principalmente o Blogger após sua aquisição pelo Google em 2003, o WordPress foi lançado no mesmo ano.

Isso é chamado de gerenciador de conteúdo , focado na criação e design de páginas da web . Até hoje, ainda é considerada uma ferramenta fundamental para esse tipo de trabalho, principalmente na área comercial.

O plugin Divi

Por mais útil que o WordPress possa ser, não é segredo que quem tem mais dificuldade em manusear este tipo de plataforma e criar páginas web  é quem não tem conhecimento de HTML e CSS .

Divi é uma ferramenta que vem ajudar , justamente, aquelas pessoas que têm pouca capacidade de gestão em relação ao WordPress, para que possam ser instruídas aos poucos e aprender a manejar da melhor forma esta plataforma.

Para quem já conhece o WordPress, é uma opção muito mais fácil na hora de desenhar os posts do seu blog ou site.

Menú desdobrável

Quando você entra no Divi do seu celular, esta plataforma, assim como a grande maioria das páginas da web, oferece uma visão diferente do desktop. Isso significa que, caso você tenha um menu na página da web que está desenvolvendo, ele se torna muito extenso e ofusca o resto do design que você desenvolveu .

Qual é a solução?

A primeira coisa que você deve se perguntar é qual solução deseja adotar. Quando se trata de menus suspensos, é melhor que os submenus não sejam exibidos até que o visitante do site os solicite . Desta forma, a experiência do usuário durante a visita será mais acolhedora.

Se é essa a sua intenção, existe uma série de códigos que basta copiar e colar no Divi para resolver este problema, proporcionando uma interface muito mais agradável para quem pode estar a visitar o seu site.

O código a ser usado

A codificação necessária para modificar a forma como o menu é exibido é um tanto extensa, mas eficaz. Insira as opções de tema Divi , Integração, copie e cole o seguinte código:

<tipo de script = »text / javascript»>

(função ($) {

function setup_collapsible_submenus () {

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

top_level_link = ‘#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 (‘. submenu’). length) {

$ (this) .on (‘click’, function (event) {

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

});

} senão {

$ (this) .on (‘click’, function (event) {

event.preventDefault ();

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

});

}

});

}

$ (janela) .load (função () {

setTimeout (function () {

setup_collapsible_submenus ();

}, 700);

});

}) (jQuery);

</script>

<tipo de estilo = »texto / css»>

# main-header .et_mobile_menu .menu-item-has-children> a {background-color: transparent; posição: relativa; }

# main-header .et_mobile_menu .menu-item-has-children> a: after {font-family: ‘ETmodules’; alinhamento de texto: centro; falar: nenhum; peso da fonte: normal; variante da fonte: normal; transformação de texto: nenhum; -webkit-font-smoothing: suavizado; posição: absoluta; }

# main-header .et_mobile_menu .menu-item-has-children> a: após {font-size: 16px; conteúdo: ‘ 4c’; topo: 13px; direita: 10px; }

# main-header .et_mobile_menu .menu-item-has-children.visible> a: after {content: ‘ 4d’; }

# main-header .et_mobile_menu ul.sub-menu {display: none! important; visibilidade: oculto! importante; transição: todos os 1.5s facilitam a entrada;}

# main-header .et_mobile_menu .visible> ul.sub-menu {display: block! important; visibilidade: visível! importante; }

</style>

Outras alternativas para otimizar

Entre os restantes códigos de utilização recomendada, encontra-se o que permite fechar o menu . Se o usuário que está visitando seu site não encontrar o que deseja no menu suspenso e nos submenus, ele poderá fechá-lo.

Caso contrário , a exibição do menu pode obscurecer a visualização do restante da página da web. E tendo em conta que está a navegar a partir do seu telemóvel, é muito provável que esteja a obscurecer toda a página. Se quiser removê-lo, copie e cole o seguinte código :

/ * Muda o menu para X quando aberto * /

.mobile_nav.opened .mobile_menu_bar: antes de {

conteúdo: ‘ 4d’;

}

Agora que você sabe como inserir um menu suspenso móvel no Divi, tudo que você precisa fazer é conhecer e aproveitar ao máximo os melhores plug – ins do WordPress para levar a criação de suas páginas da web ao topo.