Olá pessoal neste artigo vou mostrar para vocês como podemos melhorar o menu mobile da nossa loja, hoje por padrão os submenus da loja vem aberto no mobile, isso porque não tem como simular o efeito de passar o mouse em mobile, uma vez que o cliente está apertando o botão. Logo uma saída que temos é que o botão do menu principal abra os sub-menos.
Porém, temos mais um problema, desta forma o cliente nunca vai entrar (usando o menu) na categoria principal, pois o clique está ativando as subcategorias. Então uma solução é criar um “novo botão” ao lado da categoria principal, e nele colocar a ação de abrir os submenus. Assim garantimos que se cliente clicar na categoria principal ele vai acessar, se ele clicar no “novo botão” vai abrir as sub e de lá ele clica nelas. Para exemplificar e mostrar o que vamos fazer veja o GIF abaixo:
Agora vamos ajustar alguns códigos na loja, para poder ter este mesmo efeito, já colocamos esta melhoria em nosso Roda Map de atualizações, mas até lá vou te ajudar a implementar este ajuste =)
1º INSERINDO O CSS AVANÇADO
Vamos no menu de Customização > Personalização e lá vamos na aba de Avançado aqui temos dois campos o primeiro é do CSS avançado, muito cuidado se tiver alguma coisa aqui, role até o final e cole a instrução abaixo:
/* * Esconde submenu no mobile e ativa com JS * */ #off-canvas-nav .dropdown-menu{display: none;} #off-canvas-nav .nav .dropdown-toggle .caret{ display: none; } #off-canvas-nav .megamenu li {position: relative;} #off-canvas-nav .megamenu li a{ position: relative; z-index: 5; } #off-canvas-nav .nav .open_dropdown{ border: 0; width: 30px; height: 30px; top: 2px; right: 0; margin: 0; cursor: pointer; z-index: 50; position: absolute; text-align: center; color: #FFF; font-size: 27px; line-height: 0; } #off-canvas-nav .nav .open_dropdown i{ margin-top: -5px; }
1º INSERINDO O JAVASCRIPT AVANÇADO
Na mesma tela um pouco mais abaixo, vamos colocar o seguinte código, mais uma vez, muito cuidado se tiver alguma coisa aqui, role até o final.
/* * Js para criar novos elementos e depois função de Js para abrir ao clicar */ $(function(){ $('#off-canvas-nav .megamenu .dropdown-toggle').each(function(){ $(this).parent().append('<span class="open_dropdown"><i class="fa fa-sort-desc" aria-hidden="true"></i></span>'); }); $('#off-canvas-nav .open_dropdown').click(function(e){ e.preventDefault(); var atual = $(this).parent().find('.dropdown-menu').css('display'); if(atual=="none"){ $(this).parent().find('.dropdown-menu').slideDown(500); }else{ $(this).parent().find('.dropdown-menu').slideUp(500); } }); });
Bom espero ter ajudado, se este artigo foi útil para você não deixe de avaliar abaixo!
Até mais!