web-dev-qa-db-fra.com

Menu sautant lorsque vous l'appelez via PHP

J'utilise un thème personnalisé pour re-concevoir notre site Web. Cependant, un problème survient lorsque le menu bascule et affiche tous les liens, avant de les réduire rapidement sous les options parentes du menu.

Voici le site de mise en scène: http://volocommerce.staging.wpengine.com/

Cependant, c'est le code que j'utilise:

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

Et voici le script pour le menu mobile/menu de défilement:

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

Ce que j'essaie d'arrêter, c'est ceci qui se produit à chaque chargement de la page - et c'est très frustrant: Jumping Menu

Depuis, j’ai essayé d’utiliser jQuery pour masquer les éléments lors du chargement de la page, puis de supprimer la classe de masquage une fois le chargement de la page terminé.

<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>
phptheme-developmentcustomizationjqueryjavascript
1
Dan Hawkins

J'ai passé du temps à améliorer le code sur le site - c'était le problème:

Retirer

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

de la ligne 55 de l'en-tête, déplacez-le vers le haut - n'était pas encore à 100% et il a encore un peu sauté ...

Passez en revue le fichier javascript - vous voyez qu’il s’agissait d’une version ancienne, utilisez donc la version CDN (temps de chargement plus courts également)

Ajouter

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

à la ligne 3 de "header.php"

Ajoutez ensuite ce morceau de CSS & jQuery en haut 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

Je suppose que c’est un problème de chargement css. Le site Web charge toutes les ressources avant de charger la feuille de style qui masque vos sous-menus (dans votre cas, menu déroulant. Sans). La mise en file d'attente .less dans wordpress est faite un peu différemment de ce que vous enquez une feuille de style CSS normale, vous devriez donc vérifier cela.

Si tel est effectivement le problème, une solution simple qui devrait fonctionner consiste à copier la règle "display: none" dans le fichier principal style.css:

.dropdown-menu { display: none; }

Laissez-moi savoir si cela fonctionne

0
FelixSima