Novo menu mobile lateral

Layout
1

Fala povo, beleza?

Um amigo aqui da comunidade pediu ajuda para melhorar o menu mobile dele. Como é um pedido recorrente, resolvi isolar esse código em um repositório para ficar mais fácil de reaproveitar e fazer manutenções. Sempre que precisarem de algum ajuste, mandem aqui e vamos atualizando o código. Quem for desenvolvedor, fique a vontade para contribuir também.

O código é feito em cima do tema básico da Loja Integrada.

  • Contempla os três níveis do menu.
  • Permite ajuste de cores simples por variáveis CSS no topo do código.
  • Não usa jQuery.

Screen Shot 2020-11-06 at 08.42.27
Screen Shot 2020-11-06 at 08.42.272002×2060 425 KB

Código: https://github.com/brenonovelli/lojaintegrada/tree/main/SideMenuMobile

Fiz também o vídeo do processo de desenvolvimento mas ficou bem longo, direcionado pra quem está estudando o assunto. Vídeo: https://www.youtube.com/watch?v=tVhsFkjWfno

Até mais!

16 curtidas
2

Parabéns @brenonovelli ficou muito bacana.

Esse MENU dessa forma ajuda muito, pois é o jeito mais tradicional dos grandes sites então o cliente fica mais familiarizado do que aqueles quadradinhos ao lado da lupa.

Recomendo muito! :clap:t4: :clap:t4: :clap:t4: :clap:t4:

3 curtidas
3

Parabéns e Obrigado Breno.
Você, Leonardo e Yuri já me ajudaram bastante! Vocês são os caras.

4 curtidas
4

Olá Bruno, ficou muito bom o menu, porém eu gostaria que ele continuasse ainda na mesma linha da busca e que acrescentasse ainda a palavra “MENU”.
Gostaria que ele funcionasse com 3 níveis é possivel ?

Tem como dar essa força ?

1 curtida
5

Fala William,

Ele hoje já funciona com três níveis.

O lance de ficar no mesma linha da busca eu vou ficar te devendo. Teria que fazer algumas mudanças e estou super pegado esse mês. Mas isso já foi feito aqui na comunidade, várias lojas já usam essa modificação para usar a palavra ‘menu’ ali. Deve ser tranquilo achar.

1 curtida
6

Show!!!
Você poderia ensinar como colocar o botão ver detalhes entre a foto e o preço do produto?
O botão fica sobre a foto, dessa maneira as clientes não conseguem visualizar o produto todo.

Muito obrigada!

1 curtida
7

@brenonovelli
Cara, gostei bastante do menu, ótimo trabalho que você fez!!
Fui testar o codigo na loja que estou abrindo, mas não consigo tirar o efeito hover do menu e ele acaba aparecendo todo desconfigurado quando coloca o dedo/mouse em cima, sabe como resolver isso e retirar o hover só do menu mobile?
meu site é lojaeros.com

8

Fala amigo, valeu! Eu não consegui simular esse erro que você me falou. Consegue me mandar uns prints dos momentos?

1 curtida
9

Oi Beta, qual link da sua loja?

1 curtida
10

eu usava esse codigo aqui
Efeito HOVER MENU

/*Efeito passar em cima */
.menu.superior .nivel-um > li:hover{background-color:#BF6F84}

para aparecer uma cor no menu quando passava o mouse em cima, mas não queria que acontece-se no mobile. Tem como implementar esse codigo só no menu da versão desktop?

1 curtida
11

@brenonovelli Consegui resolver o problema do efeito no menu. Mas tem algo que não to conseguindo solucionar, quando acesso o site pelo mobile, o menuzinho superior ondem tem o menu, home, conta e carrinho da uma bugada.
Quando acesso pelo mobile o icone home está no lugar do icone menu, ai eles trocam rapidamente… fora que a divisoria entre os icones ta estranha e não consigo mudar isso

12

Eu tinha percebido essa bugada. Isso é certamente por causa de excesso de script. Aí acaba um brigando com o outro. Isso é uma coisa muito importante que vocês precisam ficar atentos. As vezes sair enchendo a loja de modificações avulsas pode tornar a experiência do usuário ruim.

13

Screenshot_website
Screenshot_website416×802 52 KB

Olá! Estou usando seu código e é excelente! Mas tenho uma duvida. Apareceram essas bordas em volta do menu e não consigo localizar o problema. Será que poderia me ajudar? Meu site é www.essenciazen.net.br

Muito obrigada!

14

Oi @Carol_Guimaraes, bom dia.

Demorei para responder e você já arrumou, né? Foi mal.

Vocês são feras demais!
Abs

2 curtidas
15

Oi!! Então, na verdade não tinha resolvido ainda. Eu coloquei o fundo preto pois aí não dava para ver rs. Mas acabei de conseguir arrumar haha Foi uma semana de bastante aprendizado :joy:
Acabou que gostei mais do fundo preto mesmo! De qualquer forma, muuuito obrigada pela ajuda e seu código é maravilhosooo

17

Pessoal consegui tudo certinho, só queria mudar o background do menu para branco e tirar essas linhas cinzas, podem me ajudar?

18

Alguém me ajuda não estou conseguindo!
Alguém faz um passo a passo por favor sou meio leigo nesse assunto

1 curtida
19

@brenonovelli parabéns pela iniciativa e compartilhar o código.
Queria que o menu ficasse igual o print que vc postou.
No meu tem que ir no menu pra chegar no submenu, queria que abrisse direto.
Meu site.
www.lojadoca.com.br

1 curtida
20

Aproveitando o tópico
@Carol_Guimaraes poderia compartilhar o css dos cantos arredondados do carrinho e busca.

21

Valeu!

Queria que o menu ficasse igual o print que vc postou.
No meu tem que ir no menu pra chegar no submenu, queria que abrisse direto.

:gift: :point_down:

@media (max-width: 767.98px) {
  .menu .nivel-dois {
    display: block !important;
  }
}
3 curtidas