Menu na Barra Flutuante

Layout
21

Ela não vai fazer tanta diferença, porque esse bloco não é exibido no Desk, estou suspeitando que dependendo do carregamento da página, esse bloco está sendo criado somente depois do Script executar, vou dar uma olhada aqui.

1 curtida
22

outra coisa que notei agora, no computador com a tela maximizada aparece 1 menu, eu diminuo o janela para ficar no tamanho para aparece o mobile, hora aparece na de primeira o menu, hora não.
e quando maximizo novamente ele duplica meu menu

Screenshot_25
Screenshot_251595×657 103 KB

23

Então esse seria o problema, é porque o código não está responsivo e sim, adaptativo, o usuário que entrar no Mobile, vai ver correto, o que acessar no Desk também, por causa da checagem de resolução. Pra gente fazer que um evento fique monitorando essa mudança no tamanho da janela:

$(window).on('resize', function() {
    // Código aqui
});

$(document).ready(function() {
    $(window).trigger('resize');
});
1 curtida
24

é para por este codigo junto ao anterior?



$(window).on('resize', function() {
   $('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');

    $('.menu-mobile__button').click(function(event) {
        event.preventDefault();

        $('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
    });

});

$(document).ready(function() {
    $(window).trigger('resize');
});
25

Dá pra você colocar todos os códigos que são específicos dentro dele, assim ao invés de ficar adaptativo, vai ficar responsivo:

$(window).on('resize',function() {
    if(window.innerWidth >= 768) {
        //Todos os códigos específicos para Desktop

        //Menu Flutuante
        const $container = $('#barraTopo .conteiner');
        if($container.find('.menu').length === 0) {
            $container.append('<div class="row-fluid"><div class="span12">' + $('#cabecalho .menu').prop('outerHTML') + '</div></div>');
        }

        //Bug do Menu Duplicado
        const $menu = $('#cabecalho .menu');
        if($menu.length === 2) {
            $menu.last().remove();
        }
    } else {
        //Todos os códigos específicos para Mobile
        
        //Menu Flutuante
        $('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');

        $('.menu-mobile__button').click(function(event) {
            event.preventDefault();

            $('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
        });

        //Menu Accordion
        $('.menu.superior a').click(function(event) {
            $next_level = $(this).next();
    
            if($next_level.length) {
                event.preventDefault();
    
                $next_level.toggleClass('open');
            }
        });
    }
});

$(document).ready(function() {
    $(window).trigger('resize');
});
1 curtida
26

blz joguei ja, esperando propagar para ver.
porém outra coisa que notei srsr
Screenshot_30
Aparece 2 menus no mobile, porém só funciona o de baixo.

27

Então, o evento de clique é esse: $('.menu.superior a').click(...., vou ver aqui, se estiver na página já, e não funcionar, aí a função não está sendo disparada mais.

1 curtida
28

Faz essa modificação naquele código:

//Menu Accordion
$('.menu.superior a').off('click').click(function(event) {
    $next_level = $(this).next();

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

        $next_level.toggleClass('open').addClass('nivel-dois');
    }
});

Vai resolver esse problema também: Menu Mobile Accordion - #6 por math

1 curtida
29

Show, agora não sei oq ocorreu ele criou 3 row-fluid na barratopo deixando um espaço em branco entre o menu e a parte superior

Screenshot_32
Screenshot_321861×882 160 KB

30

Não deveria, porque estou fazendo a verificação ali, antes de inserir, atualiza o código para essa última versão aqui, acredito que vai resolver o problema do evento: ‘click’:

$(window).on('resize',function() {
    if(window.innerWidth >= 768) {
        //Todos os códigos específicos para Desktop

        //Menu Flutuante
        const $container = $('#barraTopo .conteiner');
        if($container.find('.menu').length === 0) {
            $container.append('<div class="row-fluid"><div class="span12">' + $('#cabecalho .menu').prop('outerHTML') + '</div></div>');
        }

        //Bug do Menu Duplicado
        const $menu = $('#cabecalho .menu');
        if($menu.length === 2) {
            $menu.last().remove();
        }
    } else {
        //Todos os códigos específicos para Mobile
        
        //Menu Flutuante
        $('#cabecalho .atalhos-mobile .vazia').html('<a class="menu-mobile__button icon-th"></a>').removeClass('vazia').addClass('fundo-principal');

        $('.menu-mobile__button').off('click').click(function(event) {
            event.preventDefault();

            $('#cabecalho .conteudo-topo .menu').toggleClass('menu-mobile--open');
        });

        //Menu Accordion
        $('.menu.superior a').off('click').click(function(event) {
            $next_level = $(this).next();
    
            if($next_level.length) {
                event.preventDefault();
    
                $next_level.toggleClass('open').addClass('nivel-dois');
            }
        });
    }
});

$(document).ready(function() {
    $(window).trigger('resize');
});
1 curtida
31

tirou o espaçamento, funcionou o menu mult nivel porém continua duplicando

Screenshot_34
Screenshot_341636×559 58.5 KB

32

Aqui eu removi o espaçamento, adicionando esse estilo:

.row-fluid .span12:empty {
    display: none;
}

O menu duplicado, ainda não consegui reproduzir, mas vou elaborar um estilo aqui.

1 curtida
33

Não consegui reproduzir, mas pra garantir, além do Script, adiciona esse CSS também:

#cabecalho .conteiner > .menu {
	display: none;
}

#cabecalho .conteiner > div:nth-child(2) {
	display: block;
}
1 curtida
34

Consigo ocultar esse menu que aparece do lado do campo de busca?

Screenshot_35
Screenshot_35667×726 145 KB

e escreve MENU ao lado dos pontinho no menu superior
Screenshot_36

35

É possível sim, eu fiz só com CSS:

@media (max-width: 767px) {
    .atalhos-mobile li {
        position: relative;
    }

    .atalhos-mobile li:last-child:before {
        content: 'MENU';
        position: absolute;
        right: 100%;
        width: 60px;
    }

    .busca-mobile .atalho-menu {
        display: none !important;
    }

    .busca-mobile .busca {
        margin: 0;
    }

    .busca-mobile .busca .botao-busca {
        right: 0;
    }
}

Coloca esse estilo que sugeri em outra resposta, pra não ter problema com espaçamento:

.row-fluid .span12:empty {
    display: none;
}

Ou melhor ainda, pode atualizar o Script para não ficar gerando várias linhas, somente substituir esse trecho aqui:

//Menu Flutuante
const $container = $('#barraTopo .conteiner');
if($container.find('.menu__row').length === 0) {
    $container.append('<div class="menu__row row-fluid"><div class="span12">' + $('#cabecalho .menu').prop('outerHTML') + '</div></div>');
}
1 curtida
36

Boa tarde a todos;
Tudo bem com vocês?
Fiquei confuso, queria aproveitar estes códigos para a nossa loja.
Qual deles uso?
Quando é o script é no rodapés e em todas paginas?
Poderiam me auxiliar por gentileza?
Gratos!!!

37

ta meio confuso mesmo o topico srsr, to usando o ultimo codigo postado pelo Math
o script coloquei rodapé todas as paginas sim.

38

Tentei aqui mais como sou muito leigo, não dei conta
como faço para a descrição “Menu” ficar a cima dos pontinhos igual a foto

teste
teste1909×1946 150 KB

39

Pode remover esses 2 estilos acima, adicione esses no lugar:

.menu-mobile__button {
    top: 0 !important;
    display: flex;
    flex-direction: column-reverse;
    height: 50px;
}

.menu-mobile__button:after {
    content: 'MENU';
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    font-weight: 600;
}
3 curtidas
40

@math me da um help, não sei oq ocorreu mais meu MENU mobile parou de funcionar, clico nele não acontece nada.
ele esta assim
Screenshot_1