响应式滑出菜单 wordpress答案

【问题标题】：Responsive slide out menu wordpress响应式滑出菜单 wordpress
【发布时间】：2014-03-13 08:42:41
【问题描述】：

我使用本教程在自定义 wordpress 主题中构建了一个响应式滑出菜单：http://sridharkatakam.com/adding-responsive-side-menu-genesis/

我无法在手机上显示菜单按钮，因为我可以显示整个菜单或不显示菜单。

我猜这与教程中的这一步有关：

//* Wrap .nav-primary in a #primary-nav-container div
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_after_header', 'genesis_do_subnav', 11 );

add_action( 'genesis_after_header', 'sk_add_opening_div', 9 );
function sk_add_opening_div() {
echo '<div id="primary-nav-container">';
}
add_action( 'genesis_after_header', 'sk_add_closing_div' );
function sk_add_closing_div() { 
echo '</div>';
}

//* Add hamburger font icon below Primary nav
add_action( 'genesis_after_header', 'sk_hamburger_menu' );
function sk_hamburger_menu() {

echo '<div id="primary-nav-link-container"><div class="wrap"><a id="primary-nav-link"               href="#primary-nav-container"><i class="fa fa-bars"></i> Menu</a></div></div>';

}

因为我使用的是自定义主题，所以我不能使用 Genesis 挂钩来执行上面的代码，所以这是我显示菜单的代码（来自 header.php）：

<div id="primary-nav-link-container">
            <div class="wrap">
                <a id="primary-nav-link" href="#primary-nav-container">
                    <i class="fa fa-bars"></i> Menu</a>
                    <div class="nav-primary">
                    <div id="primary-nav-container">
                        <divid="menu">                  
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
                                </div>
                            </div>

有人知道如何使用 CSS 媒体查询仅在移动设备上显示响应式菜单吗？我正在使用下面的代码，但这只会导致桌面版本的菜单根本不显示。

CSS：

#primary-nav-link-container {
text-align: center;
display: none;
}

a#primary-nav-link:focus {
outline: none;
}

@media only screen and (max-width: 1023px) {

#primary-nav-container {
display: none;
}

#primary-nav-link-container {
display: block;
}

}

【问题讨论】：

标签： php jquery wordpress responsive-design

【解决方案1】：

请查看以下帖子。 Responsive Nav

这篇文章中提到了关于导航菜单的所有内容。

【讨论】：

嗨！谢谢你的回答，但这不是我想要的。我正在使用的 jQuery 代码也支持滑动，效果很好，我只是在较小的屏幕上隐藏/显示时遇到问题 :)

【解决方案2】：

如果以后有人遇到同样的问题，我会通过这样标记我的标题来解决这个问题：

<div class="headerarea">

            <div id="primary-nav-link-container">
                <a id="primary-nav-link" href="#primary-nav-container"> <i class="fa fa-bars"></i> Menu</a>                     
                    <div id="primary-nav-container">
                        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>  
                        <?php get_search_form(); ?>                         
                    </div>
            </div>          

                    <div id="menu">                 
                            <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
                    </div>              


            </div>

并相应地调整 css。

【讨论】：