Foundation 6 Wordpress theme

Question

Я пытаюсь добавить анимацию в мобильную навигацию, чтобы медленно опускаться, а не переходить на страницу. Я использую тему groundpress. Я не могу заставить его работать с data-animate. Это мой фрагмент кода:

<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-animate в том же элементе, что и ваш атрибут data-toggler (который в этом случае переключается, или «# mobile-menu»). См. Пример здесь: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation