it-swarm-pt.tech

Menu pulando quando chamando via PHP

Eu estou usando um tema personalizado para redesenhar nosso site. No entanto, estou recebendo um problema em que o Menu salta e mostra todos os links, antes de recolhê-los rapidamente sob as opções pai, no menu.

Aqui está o site de teste: http://volocommerce.staging.wpengine.com/

No entanto, esse é o código que estou usando:

            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar bar-1"></span>
                    <span class="icon-bar bar-2"></span>
                    <span class="icon-bar bar-3"></span>
                  </button>
                </div>
                </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="navbar navbar-default navbar-fixed-top">
              <div class="container">

                <div id="" class="">
         <?php 
        //$walker = new Menu_With_Description;

         wp_nav_menu (array ('theme_location' => 'header_menu', 
                                  'container'       => 'div', 
                                  'container_class' => '', 
                                  'container_id'    => '',
                                  'menu_class'      => 'menu', 
                                  'menu_id'         => '',
                                  'echo'            => true,
                                  'fallback_cb'     => 'wp_page_menu',
                                  'before'          => '',
                                  'after'           => '',
                                  'link_before'     => '',
                                  'link_after'      => '',
                                  'items_wrap'      => '<ul class="nav navbar-nav top_items">%3$s</ul>',
                                  'depth'           => 0,
                                  //'walker'          => $walker,

  )); ?>
                </div>
            </div>

         </div>
         </div>

 </nav>

E aqui está o script para o menu móvel/menu de rolagem:

     <script>
  $(function(){
    $('.navbar ul li:has(ul)').addClass('dropdown');
    $('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul li:has(div)').addClass('yamm-content');
    $('.navbar .lang_drop ul li ul:has(li)').addClass('single_drop');
    $('.navbar .lang_drop ul li:has(ul)').removeClass('');
//yamm-fw
    $('.dropdown:has(a)').addClass('dropdown-toggle');

    $('.more_menu').addClass('yamm-fw');

});


$(window).scroll(function(e){ 
  $el = $('.head_con'); 
  if ($(this).scrollTop() > 150 ){ 
    $('.head_con').addClass('head_con_scroll'); 
    $('.logo_con').addClass('logo_con_scroll'); 
    $('.menu-item').addClass('menu-item_scroll'); 
    $('.head_phone_con').addClass('head_phone_con_scroll'); 
    $('.head_call_us').addClass('head_call_us_scroll');
    $('.ceo_message').addClass('ceo_message_scroll');
  }
  if ($(this).scrollTop() < 150 )
  {
    $('.head_con').removeClass('head_con_scroll'); 
    $('.logo_con').removeClass('logo_con_scroll'); 
    $('.menu-item').removeClass('menu-item_scroll'); 
    $('.head_phone_con').removeClass('head_phone_con_scroll'); 
    $('.head_call_us').removeClass('head_call_us_scroll'); 
    $('.ceo_message').removeClass('ceo_message_scroll'); 
  } 
});
</script>

O que eu estou tentando parar de acontecer é isso, o que acontece toda vez que a página está carregando - e é muito frustrante: Jumping Menu

Eu já tentei usar jQuery para esconder os elementos no carregamento da página, em seguida, remova a classe de esconder uma vez que o carregamento da página está completa - isso também falhou :(

<script>
$(document).on("pagecontainerbeforeload",function(){
    $('.dropdown-menu').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.dropdown-menu').removeClass('hidden-element');
});
</script>
<style>
.hidden-element {display:none!important;}
</style>
1
Dan Hawkins

Passei algum tempo melhorando o código no site - essa era a questão:

Remover

<script src="/wp-content/themes/volo/js/jquery.min.js" type="text/javascript"></script> 

da linha 55 do cabeçalho, mova para o topo - ainda não foi 100% e ainda pulou um pouco ...

Revise o arquivo javascript - veja se era uma versão antiga, então use a versão CDN (tempos de carregamento mais rápidos também)

Adicionar

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 

para a linha 3 de "header.php"

Em seguida, adicione este bit de CSS e jQuery no topo de "Header.php"

<script>
$(document).on("pagecontainerbeforeload",function(){
$('.sub-menu').addClass('hidden-element');
$(document).on("pageload",function(){
$('.sub-menu').removeClass('hidden-element');
});
</script>
<style>
.sub-menu {display:none;}
</style>
0
Dan Hawkins

Eu estou supondo que este é um problema de carregamento de css. O site carrega todos os recursos antes de carregar a folha de estilo que oculta seus submenus (no seu caso dropdowns.less). O enfileiramento de arquivos .less no wordpress é feito um pouco diferente do que você faria em uma folha de estilo css normal, portanto, você deve verificar isso.

Se este é realmente o problema, uma simples correção para isso que deve funcionar, é copiar a regra "display: none" no style.css principal:

.dropdown-menu { display: none; }

Deixe-me saber se isso funciona

0
FelixSima