首先, 让我解释一下我要达到的目标:
在由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 );
就是这样:)
来源:
https://www.srcmini02.com/62650.html