Foundation 6 Wordpress主题

问题描述：

我想添加一些动画到移动导航缓慢下降，而不是页面跳跃。我正在使用foundationpress主题。我似乎无法使其与数据动画一起工作。这是我的代码片段：Foundation 6 Wordpress主题

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

答

你尝试过使用jQuery/JS触发呢？看到这个线程：https://github.com/olefredrik/FoundationPress/issues/772。

也检查你所添加的data-toggler属性的元素

答

，我没有看到你的代码片段的实际“＃移动菜单”成分，所以不是100％肯定这里发生了什么，但需要注意的一点是，您需要在具有data-toggler属性的相同元素上拥有数据动画属性（在本例中为切换的内容或“＃mobile-menu”）。看到这里的例子：http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation

Foundation 6 Wordpress主题

相关推荐