Menu Mobile Accordion

Layout
1

Boa tarde meu amigos.
Gostaria de um Help estou querendo o menu mobile em forma de Accordion, pois assim como ele é, se tiver muito sub menus fica muito grande, e no accordion ele mostra só o que o cliente clicar, e se abrir um sub menu e quiser ir clicar no outro, o anterior recolhe e sempre fica um tamanho bom para o usuario mobile visualizar.
Modelo
https://codyhouse.co/demo/multi-level-accordion-menu/index.html

Meu menu hoje possui 4 niveis, pois tenho muita variação de produtos.
Será que alguma alma caridosa poderá me ajudar?

1 curtida
2

Boa tarde!!

Acredito que esse código consiga suprir a demanda.

CSS:

@media (max-width: 767px) {
    .menu.superior .nivel-um ul {
        display: none !important;
    }

    .menu.superior .nivel-um ul.open {
        display: block !important;
    }
}

JS:

if(window.innerWidth < 768) {
    $('.menu.superior a').click(function(event) {
        $next_level = $(this).next();

        if($next_level.length) {
            event.preventDefault();

            $next_level.toggleClass('open');
        }
    });
}

Espero ter ajudado, até mais!!

1 curtida
3

joguei os codigos em uma pagina HTML do tipo JAVASCRIPT no ROdapé em todas as paginas e o menu não ficou acordion

image
image1005×738 37.4 KB

4

É porque falta colocar o CSS.

5

Verdade kkkkk
Mais agora funcionou porém ele. só funciona o primeiro nível do menu.

Screenshot_28
Screenshot_281566×703 114 KB

Screenshot_27
Screenshot_27458×749 33.1 KB

e quando eu clico no menu que tem um sub menu nivel 3, ele não carrega a pagina.

6

Parece que não há CSS para o nível 3/4… Mas sei como contornar isso, vou modificar aquele Script, para adicionar uma nova classe.

image
image630×1015 35.3 KB

7

Postei o código que resolve, nesse outro tópico, porque estávamos agrupando tudo lá: Menu na Barra Flutuante - #28 por math