Question

我正在尝试将一些动画添加到移动导航中以缓慢下拉而不是让页面跳跃。我正在使用基础印刷主题。我似乎无法使用数据动画。这是我的代码段：

<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

我没有看到实际的＆＃39;＃mobile-menu＆＃39;您的代码段中的组件，因此不是100％确定这里发生了什么，但需要注意的是，您需要在数据转换器属性的同一元素上具有data-animate属性（在这种情况下，正在切换的东西，或“＃mobile-menu＆＃39;”。请参阅此处的示例：http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation

Answer 2

你试过用jquery / js触发吗？看到这个帖子：https://github.com/olefredrik/FoundationPress/issues/772。

还要检查是否已将data-toggler属性添加到元素

基础6 Wordpress主题

2 个答案: