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:
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>
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>
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