在 <nav> 标签中添加动态 wordpress / genesis 菜单并使其隐藏 .onclick 与移动菜单按钮

Question

首先，让我解释一下我要在这里实现的目标：

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

接下来我想做的是在标签中添加我的自定义菜单（我已经创建了），就在主菜单（nav-primary）的下方，以便它在单击按钮时显示和隐藏连同它。

我尝试使用 nav-extras 将我的一段代码添加到标签的末尾，以下代码来自 genesis 片段库：

// 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都没有到位。可以找到我的路。非常感谢您的帮助:)，在此先感谢您。

Answer 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 );

差不多就这些了:)

在 <nav> 标签中添加动态 wordpress / genesis 菜单并使其隐藏 .onclick 与移动菜单按钮

Adding dynamic wordpress / genesis menu within <nav> tag and making it hide .onclick with mobile menu button

navigation

wordpress

wordpress-theming

genesis