Foundation 6 Wordpress主題

Question

我想添加一些動畫到移動導航緩慢下降，而不是頁面跳躍。我正在使用foundationpress主題。我似乎無法使其與數據動畫一起工作。這是我的代碼片段：

<div class="title-bar" data-responsive-toggle="site-navigation"> 
     <button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button> 
     <div class="title-bar-title"> 

      <div class="mini-logo"> 
      <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;"></a> 
      </div> 
      <!--<a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a>--> 
     </div> 
    </div> 

<!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >--> 
     <div class="top-bar-left"> 
      <ul class="menu"> 
       <li class="co-logo-top"></li> 
       <!--<li class="home"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></li>--> 
      </ul> 
     </div> 
     <div class="top-bar-right" > 
      <?php foundationpress_top_bar_r(); ?> 

      <?php if (! get_theme_mod('wpt_mobile_menu_layout') || get_theme_mod('wpt_mobile_menu_layout') === 'topbar') : ?> 
       <?php get_template_part('template-parts/mobile-top-bar'); ?> 
      <?php endif; ?> 
     </div> 
    </nav> 

Answer 1

你嘗試過使用jQuery/JS觸發呢？看到這個線程：https://github.com/olefredrik/FoundationPress/issues/772。

也檢查你所添加的data-toggler屬性的元素

Answer 2

，我沒有看到你的代碼片段的實際「＃移動菜單」成分，所以不是100％肯定這裏發生了什麼，但需要注意的一點是，您需要在具有data-toggler屬性的相同元素上擁有數據動畫屬性（在本例中爲切換的內容或「＃mobile-menu」）。看到這裏的例子：http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation