Question

当我的页面全屏显示时，我会显示两个单独的菜单，但是当在手机和小屏幕上显示时，我想只使用一个菜单来保存两个原始菜单中的页面链接。

为此，我创建了第三个菜单，其中包含指向所有页面的链接，并希望在wordpress菜单切换操作触发时显示第三个菜单。

但是我不知道如何让第三个菜单代替主要导航菜单显示，而这主菜单似乎默认出现。

到目前为止我的标题中的代码如下:(这不会显示第二个菜单代码，因为它显示在页面的其他位置）

<nav id="site-navigation" class="navigation main-navigation" role="navigation">
        <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
    </nav>

目前，这正确地显示了主导航菜单，因为我想要全屏显示，然后再次显示相同的菜单，菜单切换功能为较小的尺寸。但是我希望第三个菜单显示在较小的尺寸上，我尝试了h3标签之间的各种变化，试图让我想要的菜单显示但不能破解它！

通过执行以下操作，我实际上可以获得我想要显示的菜单，但是也显示了我不想要的菜单！

 <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?><?php wp_nav_menu( array( 'theme_location' => 'small-screen-nav-menu', 'menu_class' => 'nav-menu' ) ); ?></h3>

我一直在使用functions.php以及navigation.js，但似乎无法找到正在定义的菜单的位置，因此无法找到更改它的位置 - 任何帮助都会受到大力赞赏！！

提前致谢

Answer 1

使用媒体查询来显示或隐藏内容：

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #site-navigation{display:none;}
    h3.menu-toggle{display:block;}
}

否则，您需要详细了解wp_nav_menu（）的工作原理read this

切换菜单，用菜单切换wordpress显示

1 个答案: