在nav标签内添加动态wordpress/genesis菜单，并使其隐藏。

首先, 让我解释一下我要达到的目标：

在由StudioPress重新设计Wordpress Genesis-sample主题时, 我决定仅对所有显示分辨率使用响应菜单(移动菜单, 带有汉堡图标的菜单)。我已经将菜单附加到的右钩子上, 并按自己的喜好设置了部分样式, 还设置了移动菜单以在所有媒体查询中显示。

我接下来要做的是在主菜单(nav-primary)的下面, 在标签内添加我的自定义菜单(已创建), 以便它与单击一起显示和隐藏。

我尝试使用nav-extras将我的代码片段添加到标签的末尾, 其中以下代码来自创世纪摘要库：

// Adding custom menu support

add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ), 'secondary' => __( 'Footer Menu', 'genesis-sample' ), 'custom' => __( 'Custom Menu', 'genesis-sample' ), )
);



//My custom menu function 

function add_custom_menu() {

    // Do nothing if menu not supported.

    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom', 'menu_class'     => $class, ) );

}

// Add typical attributes for navigation elements.

add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'my_skiplinks_attr_nav_custom' );

/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */

function my_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}

add_filter( 'genesis_skip_links_output', 'my_skip_links_output' );

/**
 * Adds skip link for custom navigation.
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */

function my_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}


//Adding custom menu to <nav> tag

    add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
    /**
     * Filter menu items, appending either a search form or today's date.
     *
     * @param string   $menu HTML string of list items.
     * @param stdClass $args Menu arguments.
     *
     * @return string Amended HTML string of list items.
     */
    function theme_menu_extras( $menu, $args ) {
        //* Change 'primary' to 'secondary' to add extras to the secondary navigation menu *//
        if ( 'primary' !== $args->theme_location )
        return $menu;

        $menu .= '<div id="sub-menu">'. add_custom_menu() .'</div>';

        return $menu;
    }

结果是, 即使我添加的div也未放置到位。可以找到我的路。帮助将不胜感激:), 在此先感谢你。

#1

我已经解决了：

// Hide/display on mobile-menu button click

window.onclick = hideFunction;

function hideFunction() {
    let x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");

    if (x == "true") {
    document.getElementById("genesis-nav-custom").style.display = "block";   
    } else {
    document.getElementById("genesis-nav-custom").style.display = "none";    
    };
}

// Create custom menu and hook into the header just under <nav> (the primary navigation) tag

// Register the custom menus.

function register_additional_menu() {
    register_nav_menu( 'custom' , __( 'Header Submenu' ));
    }
    add_action( 'init', 'register_additional_menu' );

/**
 * Echoes the "Custom Navigation" menu.
 */
function custom_do_nav() {
    $class = 'custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom', 'menu_class'     => $class, 'menu_id'        => 'custom-menu', ) );

}


// Add typical attributes for navigation elements.
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}
// Custom menu action hook
add_action( 'genesis_header', 'custom_do_nav', 12 );

就是这样:)