响应菜单未在页脚中展开

时间:2016-10-15 作者:Eileen Burns

我把页脚菜单添加到了我的儿童主题“二十一”中。菜单在更宽的屏幕上运行良好,但当我在移动设备上最小化或查看它并将其格式化为按钮时,单击按钮并不像在标题中那样展开菜单。我根据在网上找到的几个教程添加了代码。页脚中的代码。php是这样的:

<nav id="footer-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( \'Menu\', \'twentytwelve\' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( \'Skip to content\', \'twentytwelve\' ); ?>"><?php _e( \'Skip to content\', \'twentytwelve\' ); ?></a>
        <?php wp_nav_menu( array( \'theme_location\' => \'secondary\', \'menu_class\' => \'nav-menu\' ) ); ?>
    </nav><!-- #footer-navigation -->
在函数中。php我添加了以下内容:

function mychildtheme_setup() {  
  register_nav_menu( \'secondary\', __(\'Footer Menu\', \'twentytwelve\') );
}

add_action( \'after_setup_theme\', \'mychildtheme_setup\', 11 );
你可以view my site here. 有什么想法吗?

1 个回复
SO网友:anthony.s

在子主题的“js”目录中创建文件“navigation footer.js”,并粘贴以下代码:

/**
 * Handles toggling the footer navigation menu for small screens
 */
( function() {
    var nav = document.getElementById( \'footer-navigation\' ), button, menu;
    if ( ! nav ) {
        return;
    }

    button = nav.getElementsByTagName( \'button\' )[0];
    menu   = nav.getElementsByTagName( \'ul\' )[0];
    if ( ! button ) {
        return;
    }

    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = \'none\';
        return;
    }

    button.onclick = function() {
        if ( -1 === menu.className.indexOf( \'nav-menu\' ) ) {
            menu.className = \'nav-menu\';
        }

        if ( -1 !== button.className.indexOf( \'toggled-on\' ) ) {
            button.className = button.className.replace( \' toggled-on\', \'\' );
            menu.className = menu.className.replace( \' toggled-on\', \'\' );
        } else {
            button.className += \' toggled-on\';
            menu.className += \' toggled-on\';
        }
    };
} )();
将此代码添加到函数。php:

function more_scripts_styles() {
    // Adds JavaScript for handling the footer navigation menu hide-and-show behavior.
    wp_enqueue_script( \'twentytwelve-footer-navigation\', get_stylesheet_directory_uri() . \'/js/navigation-footer.js\', array( \'jquery\' ), \'20140711\', true );
}
add_action( \'wp_enqueue_scripts\', \'more_scripts_styles\' );

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件,但我的样式表没有包含在<head>.. 这是我的代码:add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register